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