选项卡是web开发中经常使用到的一个模块，在小程序中竟然没有，这里参考别人的文章自己做了一个双选项卡
实现思路：
通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示)，达到切换展示电影和游戏的目的
代码：
1.index.wxml
<!--index.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="" bindtap="swichNav">电影</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="" bindtap="swichNav">游戏</view>
</view> <view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>
<view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>
2.index.wxss
.swiper-tab {
width: %;
text-align: center;
line-height: 80rpx;
background-color:white;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: %;
color: #;
border-bottom: 0rpx;
}
.on {
color: #da7c0c;
border-bottom: 2rpx solid #da7c0c;
}
.swiper-box {
display: block;
height: %;
width: %;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}
3.index.js
//index.js
//获取应用实例
var app = getApp()
Page( {
data: {
isShow: true,
currentTab: ,
}, swichNav: function (e) {
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
var showMode = e.target.dataset.current == ;
this.setData({
currentTab: e.target.dataset.current,
isShow: showMode
})
}
},
})
参考文章：http://blog.csdn.net/qq_31383345/article/details/52900835