wxml
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">tab一</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">tab二</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
<view>111</view>
</swiper-item>
<swiper-item>
<view>222</view>
</swiper-item>
</swiper>
wxss
.swiper-tab {
width: 100%;
border-bottom: 1rpx solid #f2f2f2;
text-align: center;
line-height: 100rpx;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: #fff;
box-shadow: 0px 5px 8px 0px rgba(75, 127, 205, 0.12);
}
.swiper-tab-list {
width: 50%;
font-size: 36rpx;
display: inline-block;
color: #777777;
}
.on {
color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
margin-top: 140rpx;
}
.swiper-box view {
text-align: center;
}
js
data: {
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
},
onLoad: function (options) {
wx.getSystemInfo({
success: (res) => {
this.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
bindChange: function (e) {
this.setData({
currentTab: e.detail.current
});
},
swichNav: function (e) {
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
this.setData({
currentTab: e.target.dataset.current
})
}
},