WeChat Mini Program Tab Switch

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
      })
    }
  },

Extension points:
The difference between wx: if vs hidden
wx: if is displayed when true, hidden is displayed when false.
wx: if is not rendered when hidden, while hidden is still rendered when hidden, but it is not displayed.
In general, wx: if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, if you need to switch frequently, hidden is better. If the conditions are unlikely to change at runtime, wx: if is better.