微信小程序 点击显示隐藏 极简Tab标签 点击添加class样式

<!-- tab -->
<view class="tab_box">
  <view class="tab_item {{current==0?'tab_item_active':''}}" bindtap="onClickItem" data-idx='0'>11111</view>
  <view class="tab_item {{current==1?'tab_item_active':''}}" bindtap="onClickItem" data-idx='1'>22222</view>
  <view class="tab_item {{current==2?'tab_item_active':''}}" bindtap="onClickItem" data-idx='2'>33333</view>
  <view class="tab_item {{current==3?'tab_item_active':''}}" bindtap="onClickItem" data-idx='3'>44444</view>
</view>
<!-- tab_item -->
<view hidden='{{current!=0}}'>我是11111</view>
<view hidden='{{current!=1}}'>我是22222</view>
<view hidden='{{current!=2}}'>我是33333</view>
<view hidden='{{current!=3}}'>我是44444</view>

data: {
    current:0,

  },
  onClickItem(e) {
    console.log(e.currentTarget.dataset.idx)//获取自定义的值
    let idx = e.currentTarget.dataset.idx
    if (this.current !== idx) {
      this.setData({ current: idx })
    }
  },

.tab_item {
  height: 84rpx;
  font-size: 29rpx;
  color: #747474;
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab_item_active{color:#ff4d4d}
.tab_item_active:after {
  content: "";
  display: block;
  width: 50rpx;
  height: 5rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ff4d4d;
}
.tab_box {
  display: flex;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 10rpx
}