微信小程序 选项卡

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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容