uniapp跨平台开发---动态控制底部切换显示

业务需求

不同用户或者应用场景,底部tab展示不同的内容,针对活动用户额外增加底部tab选项

活动用户 

非活动用户

 

实现思路 

 首先在tabbar list中增加中间活动tab的路径代码,设置visible:false,然后再根据条件信息控制活动tab是否展示

pages.json

{"pagePath": "pages/wallet/main",// 默认活动tab隐藏显示"visible":false,"text": "Gana","iconPath": "static/icons/no-wallet.png","selectedIconPath":"static/icons/is-wallet.png","enablePullDownRefresh": true},

控制tab打开

 index是指tab在list中的哪一项，从左边算起

 uni.setTabBarItem({index: 1,visible: false})

 注意

uni.setTabBarItem(OBJECT)该方法在H5项目中调用必须在tabbar页面调用,如果在非tabbar页面调用会报错errMsg: "setTabBarItem:fail not TabBar page"