//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
});
}
})
},