1、小程序中的tab切換應(yīng)該是很常用的東西，于是記錄一下進(jìn)行分享
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,
? ? ? })
? ? }
? },
