1.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; }
3.index.js
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 }) } } })