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"