html
<view class="swiper-tab tabs">
<view class="swiper-tab-list {{activeIndex==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">商品介绍</view>
<view class="swiper-tab-list {{activeIndex==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">商品评价</view>
</view>
<swiper current="{{activeIndex}}">
<swiper-item>
<view class="shopSize">商品规格详情</view>
</swiper-item>
<swiper-item>
<view class="comment">商品评价</view>
</swiper-item>
</swiper>
js
data: {
activeIndex:0,
}
// 点击事件
tabNav: function (e) {
// console.log(e)
this.setData({
activeIndex: e.currentTarget.dataset.current
});
// console.log("navTabClick:" + e.currentTarget.dataset.current);
},
css
> .tabs{
width:100%;
height:80rpx;
line-height:80rpx;
display: flex;
border-bottom:2rpx solid lightgray;
}
.tabs view{
width:50%;
text-align: center;
}
.on{
width:50%;
color:red;
border-bottom:2rpx solid red;
}
.swiper-tab-list{
width:50%;
}
.shopSize{
height:100%;
overflow: scroll;
}
网友评论