小程序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,
      });
    }

  },

})
相關文章
相關標籤/搜索