微信小程序

微信小程序 选项卡

2018-06-08  本文已影响10人  zlf_j

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;
}
上一篇 下一篇

猜你喜欢

热点阅读