美文网首页微信小程序
微信小程序 选项卡

微信小程序 选项卡

作者: zlf_j | 来源:发表于2018-06-08 14:19 被阅读10次

    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;
    }
    

    相关文章

      网友评论

        本文标题:微信小程序 选项卡

        本文链接:https://www.haomeiwen.com/subject/dccasftx.html