微信小程序tab切换

wxml

<view class="nav-box">
  <!-- tab框 -->
  <view class="nav-tab">
    <view wx:for="{{navList}}" wx:key="index" data-current="{{index}}" class="item {{currTab == index? 'active':''}} " bindtap="tabSelect">
      <text>{{item}}</text> 
    </view>
  </view>
  <!-- tab框显示内容  可以使用wx:if判断也可以使用hidden判断，这个可以根据需求选择使用-->
  
  <view class="content"  hidden="{{currTab !== 0}}">内容1</view>
  <view class="content" hidden="{{currTab !== 1}}">内容2</view>
  <view class="content" wx:if="{{currTab == 2}}">内容3</view>
  <view class="content" wx:if="{{currTab == 3}}">内容4</view>
</view>

wxss

.nav-tab {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-around;
}

.nav-tab .item {
  border-bottom: 6rpx solid transparent;
}

.nav-tab .item.active {
  border-bottom: 6rpx solid #f00;
}

.content {
  text-align: center;
  padding: 20rpx;
}

js

 data:{
    navList: ['分类1', '分类2', '分类3', '分类4'],
    currTab: 0, //导航栏当前项
  },

  //导航点击
  tabSelect: function (e) {
    console.log(e)
    let index = e.currentTarget.dataset.current
    if (this.data.currTab == index) {
      return false
    } else {
      this.setData({
        currTab: index
      })
    }
  },

扩展点：
wx:if vs hidden的区别
wx:if 是遇 true 显示，hidden 是遇 false 显示。
wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不展现出来。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。