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

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

文章图片

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

ishidden != index 意思就是显示与点击的tab的index的块。
具体可以看代码：
wxml:

{{ item }} "index": {{index}} {{item.content}}

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

【微信小程序|微信小程序利用 hidden 实现点击tab导航栏，显示对应的内容栏目】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; }