控制组件显示隐藏可以用 wx:if 也可以用 hidden。两者是区别是如果用 wx:if ，每次切换tab的时候组件都会重新渲染，生命周期方法会重新调用执行。而用 hidden则不会重新渲染，生命周期函数也不会重新调用。
具体用哪个看业务需求了，贴一段官方的描述：
再看主页home，它本身是一个component，又包含了两个component ：最热hot 和 最新new。
同样需要在home.json中注册这两个组件
{ "component": true, "usingComponents": { "hot": "hot/hot", "new": "new/new" } }
注意home本身是一个component，所以需要注明"component": true
布局文件 home.wxml
<view> <view> <view bindtap='switchTab'>最热</view> <view bindtap='switchTab'>最新</view> </view> <view wx:if='{{currentTab === 0}}'><hot/></view> <view wx:if='{{currentTab === 1}}'><new/></view> </view>
js文件 home.js
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { currentTab: 0 }, /** * 组件的方法列表 */ methods: { switchTab(e) { console.log(e) let tab = e.currentTarget.id if (tab === 'tableft') { this.setData({ currentTab: 0 }) } else if (tab === 'tabright') { this.setData({ currentTab: 1 }) } } } })
给两个tab的view设置了id属性值为tableft和tabright，设置了id后就可以用e.currentTarget.id获取到当前点击的是哪个元素了。
其他几个页面的代码都大同小异，主要是判断当前点击的是哪个tab，然后根据currentTab判断该显示或隐藏哪个组件。
源码地址：
https://github.com/cachecats/...
总结
以上所述是小编给大家介绍的微信小程序自定义tab实现多层tab嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: