微信小程序 利用 hidden 实现点击tab导航栏，显示对应的内容栏目

在微信小程序中，该功能会频繁用上，这次是利用微信小程序的 hidden 属性，通过 变量赋值 数据渲染 达到效果。
上效果图：

因为会频繁操作，所以用 hidden 比 wx-if 更好。
一般我们会用 block 生成许多块。 可以利用 数据绑定去 控制块的 hidden ，达到显示和隐藏的效果。

知识点：

ishidden != index 意思就是显示与点击的tab的index的块。

具体可以看代码 ：

wxml:

<view class="list">
    <view wx:for="{{ list }}" wx:key="index" class="a" bindtap='showTo' data-myindex="{{index}}">
    {{ item }}
    </view>
</view>

   <block wx:for="{{listone}}" wx:key="id">
    <view hidden="{{ishidden != index}}" class="b" >
      <!--   ishidden != index == true  则显示 -->
      <view> "index": {{index}}  </view>
       {{item.content}}
    </view>
    </block>

js:

//index.js
//获取应用实例
const app = getApp()

Page({
  

  data: {
    list: ["list0", "list1", "list2"],
    listone: [
      { id: 0, content: '这是 list0 栏目的内容' },
      { id: 1, content: '这是 list1 栏目的内容' },
      { id: 2, content: '这是 list2 栏目的内容' }
      ],
      ishidden: 0
  },


  showTo: function (e) {
    // 获取标签元素上自定义的 data-myindex 属性的值
    let myindex = e.currentTarget.dataset.myindex;
    console.log(myindex);
    this.setData({
      ishidden: myindex  
    })
    
  }

})

wxss:

page{
  height: 100%;
}

.list{
   display: flex;
   justify-content:center;
}

.a{
  background-color:hotpink;
  width: 300rpx;
  text-align: center;
}

.b{
height: 100%;
padding: 100rpx 0;
background-color: cornflowerblue;
text-align: center;
font-size: 60rpx;
}