小程序中实现tab切换功能

参考：https://a-jing.blog.csdn.net/article/details/77931467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

 

<view class="centerna">
  <view class="mainswiper">
    <view class="swiper-tab">
      <block wx:for="{{shoppinglist}}" wx:key="id">
        <view class="swiper-tab-list {{tab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="tab_click">
          {{item.room_no}}门锁
        </view>
      </block>
    </view>
    <image src="../../../resources/keylock/icon／语音@3x.png" style="width:48rpx; height:48rpx; margin-right:20rpx;">
    </image>
  </view>

  <!-- <swiper current="{{tab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px"
    bindchange="tab_slide">
    <swiper-item class="sonitemswiper">
      <view class="shixiao">
        门锁输入密码开锁(5分钟有效）
      </view>
      <view class="pasblock">
        <view class="iptshang">
          <view  class="blockfa">*</view>
        </view>
        <text class="wenzipas">点击查看密码</text>
      </view>
    </swiper-item>
  </swiper> -->

　　

  tab_click: function (e) {//点击tab切换
    var that = this;
    if (that.data.tab === e.target.dataset.current) {
      // console.log('0000000')
      return false;
    } else {
      that.setData({
        tab: e.target.dataset.current,
        open: false
      })
      that.loadOrderDetail(shoppinglist[e.target.dataset.current].id)
    }
  },

　　

tab: 0,