1、小程序中的tab切换应该是很常用的东西，于是记录一下进行分享
wxml代码
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"><view>资料</view></view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab"><view>交易</view></view>
</view>
wxss代码
.swiper-tab{width:100%;text-align:center;height:85rpx;line-height:85rpx;display:flex;flex-flow:row;justify-content:space-around;color:#ccc;font-size:30rpx;border-bottom:1px solid #e1e1e1;/*position:fixed;top:0;left:0;background:#f7f7f7;z-index:100;*/}
.swiper-tab-item{width:100%;color:#a9a9a9}
.swiper-tab-item view{position:relative;display:inline}
.active view{border-bottom:3px solid #f65959;padding-bottom:18rpx}
.swiper-tab .swiper-tab-item.active{color:#f65959;font-size:30rpx;font-weight:700}
js代码
data中添加 currentTab:0,//资料交易切换按钮
//点击切换
clickTab: function (e) {
var that = this;
if (that.data.currentTab === e.currentTarget.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.current,
})
}
},
