微信小程序-tab切换

//wxml

<view class="wrap">

<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>

 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight-36}}px" bindchange="bindChange">

<!-- 简介 -->

<swiper-item>

<scroll-view class="intro_main" style="height:{{winHeight-36}}px" scroll-y="true">

<view class="vipList">

<view class="vipListBar" wx:for="{{11}}">

<view class="vipListBarBox">

<view class="vipListBarBoxLeft">VIP服务码</view>

<view class="vipListBarBoxRight">VMI9E3L3G9</view>

</view>

<view class="vipListBarText">复制使用</view>

</view>

</view>

</scroll-view>

</swiper-item>

<!-- 目录 -->

<swiper-item>

<scroll-view class="Catalog" style="height:{{winHeight-36}}px" scroll-y="true">

<view class="vipList">

<view class="vipListBar" wx:for="{{9}}">

<view class="vipListBarBox">

<view class="vipListBarBoxLeft leftActive">VIP服务码</view>

<view class="vipListBarBoxRight RightActive">VMI9E3L3G9</view>

</view>

<view class="vipListBarText active">已失效</view>

</view>

</view>

</scroll-view>

</swiper-item>

</swiper>

</view>

 

.swiper-tab{

100%;

border-bottom: 1rpx solid #e6e6e6;

text-align: center;

line-height: 68rpx;

box-sizing: border-box;

display: flex;

justify-content: space-around;

}

.swiper-tab-list{

font-size: 30rpx;

100rpx;

color: #999999;

font-weight: bold;

 

}

.on{

color: #333333;

border-bottom: 4rpx solid #da7c0c;

}

.swiper-box{ display: block; 100%; overflow: hidden; margin-bottom: 100rpx;}

 

data: {

winWidth: 0,

winHeight: 0,

// tab切换

currentTab: 0,

},

// 滑动切换tab

bindChange: function (e) {

var that = this;

that.setData({ currentTab: e.detail.current });

},

/**

* 点击tab切换

*/

swichNav: function (e) {

var that = this;

if (this.data.currentTab === e.target.dataset.current) {

return false;

} else {

that.setData({

currentTab: e.target.dataset.current

})

}

},

onLoad: function (options) {

var that= this;

wx.getSystemInfo({

success: function (res) {

that.setData({

winWidth: res.windowWidth,

winHeight: res.windowHeight

});

}

})

},