[置顶] 微信小程序实现tabs选项卡效果简单代码实例

<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">隆胸</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">纹眉</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">双眼皮</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="tabNav">闪现</view>
</view>
<swiper current="{{currentTab}}" duration="1000"  >
<swiper-item><view>。。。隆胸。。。。</view></swiper-item>
<swiper-item><view>。。。纹眉。。。。</view></swiper-item>
<swiper-item><view>。。。双眼皮。。。</view></swiper-item>
<swiper-item><view>。。。闪现。。。</view></swiper-item>
</swiper>

data: {
isShow: true,
currentTab: 0,
},
tabNav: function (e) {
console.log(e.target.dataset.current, 111, this.data.currentTab)
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {

var showMode = e.target.dataset.current == 0;

this.setData({
currentTab: e.target.dataset.current,
isShow: showMode
})
}
},

/* 下面是tobar */
.swiper-tab {
width: 100%;
text-align: center;
line-height: 80rpx;
background-color:white;
}

.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 25%;
color: #777;
border-bottom: 0rpx;
}

.on {
color: #da7c0c;
border-bottom: 2rpx solid #da7c0c;
}

.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}

.swiper-box view {
text-align: center;
}