小程序tab切换

最新推荐文章于 2020-12-30 11:14:51 发布

weixin_30888027

最新推荐文章于 2020-12-30 11:14:51 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/Anne3/p/8855199.html

版权

<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