小程序tab切换

<view class="tab {{tabFixed ? 'tab-fixed':''}}">
      <view class="{{tabMonth==2 ? 'active' : ''}}" data-id="2" bindtap='checkTab'>二月</view>
      <view class="{{tabMonth==3 ? 'active' : ''}}" data-id="3" bindtap='checkTab'>三月</view>
      <view class="{{tabMonth==4 ? 'active' : ''}}" data-id="4" bindtap='checkTab'>四月</view>
    </view>
 <view class="tab-bd">
    <view wx:if="{{tabMonth == 2}}">
      <block">
        <view> 2</view>
      </block>
    </view>
    <view wx:elif="{{tabMonth == 3}}"> 3 </view>
    <view wx:else="{{tabMonth == 4}}"> 4 </view>
  </view>  

因为刚开始做,所以没有什么更好的办法,只能把以前操作dom的思路转化为小程序操作数据的方式

Page({
  data: {
    tabMonth: 4,
  },

  checkTab: function (e) {
    if (e.target.dataset.id == this.data.tabMonth) {
      return false;
    } else {
      this.setData({
        tabMonth: e.target.dataset.id,
      });
    }

  },

})

  

原文地址:https://www.cnblogs.com/Anne3/p/8855199.html