选项卡效果切换如下:滑动即可对应切换
wxml代码
<view class='TabSwiper'>
<view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>游戏</view>
<view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>专题</view>
<view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>挑战</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item><view class='swiper_con'>1.游戏</view></swiper-item>
<swiper-item><view class='swiper_con'>2.专题</view></swiper-item>
<swiper-item><view class='swiper_con'>3.挑战</view></swiper-item>
</swiper>
wxss代码:
.tab{
float: left;
width: 33.3333%;
text-align: center;padding: 10rpx 0;
}
.TabSwiper{
width: 100%;
height: 150rpx;
line-height: 150rpx;
display: flex;
flex-direction: row;
background-color: rgb(248, 248, 248);
}
.tabBorer{
border-bottom: 1px solid blue;
color: blue;
}
.swiper{
width: 100%;
}
.swiper_con{
text-align: center;
width: 100%;
height: 100%;
padding: 80rpx 0;
}
js代码:
Page({
data: {
currentData: 0,
},
//获取当前滑块的index
bindchange: function (e) {
const that = this;
that.setData({
currentData: e.detail.current
})
},
onLoad: function () {
},
//点击切换,滑块index赋值
checkCurrent: function (e) {
const that = this;
if (that.data.currentData === e.target.dataset.current) {
return false;
} else {
that.setData({
currentData: e.target.dataset.current
})
}
}
})