选项卡效果切换如下：滑动即可对应切换
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,},//获取当前滑块的indexbindchange: 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})}}})
