《wxml 代码》
<view class='topSwiper'>
<view class='tab {{nav == 0 ? "active" : ""}}' data-current ="0" bindtap='box'>积分明细</view>
<view class='tab {{nav == 1 ? "active" : ""}}' data-current ="1" bindtap='box'>积分规则</view>
<view class='tab {{nav == 2 ? "active" : ""}}' data-current ="2" bindtap='box'>积分兑换</view>
</view>
<swiper current="{{nav}}" class='swiper' duration="300" bindchange="boy">
<swiper-item>
<view class='swiper_con'>
积分明细
</view>
</swiper-item>
<swiper-item>
<view class='swiper_con'>
积分兑换
</view>
</swiper-item>
<swiper-item>
<view class='swiper_con'>
积分兑换
</view>
</swiper-item>
</swiper>
wxss 代码
.topSwiper{margin:10rpx;border-radius:12rpx;zoom: 1;color: gray;}
.topSwiper .tab{display:inline-block; width: 33.3333%;text-align: center;height:80rpx;line-height:80rpx;font-size:28rpx;}
.swiper{width: 100%;}
.swiper .swiper_con{font-size: 28rpx;width:auto;height:100%;margin:10rpx; }
.active{border-bottom: 1px solid #000; color: #000;}
js 代码
data: {
nav:0,
},
//获取当前滑块的index
boy: function (e) {
const that = this;
that.setData({
nav: e.detail.current
})
},
//点击切换,滑块index赋值
box: function (e) {
console.log(e)
const that = this;
if (that.data.nav === e.target.dataset.current) {
return false;
} else {
that.setData({
nav: e.target.dataset.current
})
}
},