微信小程序tab（swiper）切换
<- wxml -> <view class="youhui">
<view class="{{_num==0?'active':''}}" data-index='' bindtap='toggle'>
未使用
</view>
<view class="{{_num==1?'active':''}}" data-index='' bindtap='toggle'>
已使用
</view>
<view class="{{_num==2?'active':''}}" data-index='' bindtap='toggle'>
已过期
</view>
</view> <swiper current="{{_num}}" class="swiper-box" duration="" bindchange="bindChange" style='min-height:645rpx'>
<!-- 未使用 -->
<swiper-item>
<view class="yohui_article">
<view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view>
<view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view>
</view>
</swiper-item>
<!-- 已使用 -->
<swiper-item>
<view class="yohui_article youhui_article1">
<view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view>
</view>
</swiper-item>
<!-- 已过期 -->
<swiper-item>
<view class="yohui_article youhui_article2">
<view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<- wxss ->
.youhui{
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-around;
background-color: #fff;
height:100rpx;
font-size: 32rpx;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.youhui>view{
display: flex;
align-items: center;
}
.active{
color: #DF2E26;
border-bottom:3px solid #DF2E26;
}
/* 有优惠 */
.yohui_article{
width: 100%;
}
.yohui_article>view{
padding:15rpx 20rpx;
box-sizing: border-box;
}
.yohui_article>view>view{
min-height:185rpx;
display: flex;
flex-direction: row;
font-size: 28rpx;
/* justify-content: space-between; */
color: #fff;
align-items: center;
}
.youhui_article1>view>view{
color: #727272;
}
.youhui_article2>view>view{
color: #FFF4F4;
}
.Size{
display: flex;
width: 27%;
font-size:44rpx;
align-items: baseline;
}
.smallSize{
font-size: 28rpx;
margin-left: 30rpx;
}
.yohui_article>view>view>view:nth-of-type(2){
display: flex;
flex-direction: column;
font-size: 24rpx;
}
.youhui_article1>view>view>view:nth-of-type(2){
color:#8A8A8A;
}
.yohui_article>view>view>view:nth-of-type(2)>text:nth-of-type(1){
font-size:38rpx;
margin-bottom: 30rpx;
}
.control{
margin-left:30rpx;
}
.control navigator{
width:150rpx;
height:55rpx;
line-height:55rpx;
background-color: #662727;
text-align: center;
border-radius: 6rpx;
}
<- js ->
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
state:0,
_num:'0'
},
/**
* 点击tab切换
*/
toggle(e){
console.log(e.currentTarget.dataset.index);
if (this.data._num === e.currentTarget.dataset.index) {
return false;
} else {
this.setData({
_num: e.currentTarget.dataset.index
})
}
// if (e.currentTarget.dataset.index=="0"){
// this.setData({
// state: 0,
// _num: e.target.dataset.index
// })
// } else if (e.currentTarget.dataset.index == "1"){
// this.setData({
// state:1,
// _num: e.target.dataset.index
// })
// } else if (e.currentTarget.dataset.index == "2"){
// console.log('已进入已过期');
// this.setData({
// state: 2,
// _num: e.target.dataset.index
// })
// }
},
bindChange: function (e) {
var that = this;
console.log(e)
that.setData({
_num: e.detail.current
});
switch (e.detail.current) {
case 0:
that.data.state = 0
break;
case 1:
that.data.state = 1
break;
case 2:
that.data.state = 2
break;
}
// wx.request({
// url: app.baseURL + 'act=member_invoice&op=mycomposegroup',
// data: {
// appid: app.appid,
// pagenums: "1",
// member_id: app.member_id,
// state: that.data.state
// },
// header: {
// 'content-type': 'application/json' // 默认值
// },
// success: function (res) {
// app.allorders = res.data.datas.goods
// that.setData({
// list: res.data.datas.goods,
// height: res.data.datas.goods.length * 215
// })
// }
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
}
})
微信小程序tab（swiper）切换的更多相关文章
- 微信小程序 - tab+swiper切换（非组件）
无奈slot不支持循环,无法成为组件. 该模板适用于新闻等,点击下载示例:tabswiper
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序tab栏切换
Wxml代码:<view class="body"> <view class="nav bc_white"> <view clas ...
- 微信小程序--Tab栏切换的快速实现
上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序开发--路由切换，页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序 - 自适应swiper高度（非组件）
微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swipe ...
- 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
随机推荐
- systemd的作用
早上群上讨论了一下systemd的作用,还导致了一个人的直接退群,出于求知心理,搜索了一些systemd,对此也作出了一些相应的整理: 一.systemd的诞生: 学习嵌入式bootloader与ke ...
- 团体程序设计天梯赛 L1-034.点赞
描述 微博上有个"点赞"功能,你可以为你喜欢的博文点个赞表示支持.每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性.本题就要求你写个程序,通过统计一个人 ...
- 关于 promise 吃到错误的理解
关于 promise 吃到错误的理解 下面的内容需要对浏览器原生支持的 promise 的基本用法有了解,如果你还不知道 promise 和 promise 的 catch 方法,你可能需要先在 这里 ...
- parted分区及挂载实战操作大全
个人原创博客,转载请注明,否则要负法律责任 2017-09-29-14:46:25[root@localhost ~]# df -hFilesystem Size Used Avail Use% Mo ...
- 初始化angularJS之ng-app的自动绑定和手动绑定
在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstr ...
- Lucene-01:创建索引
我们在D盘下建一个文件夹叫lucene,lucene内再建两个文件夹,一个叫example,一个叫index01.example文件夹下三个txt文件,a.txt内容为hello java,b.txt ...
- form表单里的故事
<form class="m-t" role="form" action='javascript:;'> <div class="f ...
- python基础学习二 数据结构之list及相关基本操作
list是py内置的一种数据类型,list就是列表的意思,list就是一种有序的数据集合,可以随时增加和删除list的元素. 生活中,比如我们要列出全班同学的名字,就可以用list来表示 >&g ...
- tomcat启动时间过长的问题
阿里云下的服务器安装jdk1.8和tomcat之后出现了一个问题,初次运行tomcat没有问题,可以正常访问tomcat首页,但是关闭之后再重启就发现tomcat首页刷不出来.而且再次关闭之后还报错了 ...
- Matlab绘图基础——其他三维图形（绘制填充的五角星）
其他三维图形 %绘制魔方阵的三维条形图 subplot(2,2,1); bar3(magic(4)); %以三维杆图形式绘制曲线y=2sin(x) subplot(2,2,2); y=2*sin( ...