【TabBar】根据角色展示不同的数量或内容解决方案

官方文档：https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbaritem

看不懂的看我的解决方案：

1、pages.json里面按照要求配置好最全数量的tabbar，一定要按照最大数量配置，切记！！！并且此时对应的tabbar页面是公共的tabbar（最大数量为5个）例如ont，two，three。

2、将不同角色的页面提前创建好，写好自己的业务内容，此页面无需在 pages.json 中配置，作为一个组件引入即可。

3、在所有进入tabbar页面的url处一定要处理好标识，比如A角色=1，B角色=2。然后使用 switchTab 跳转对应的tabbar公共页面。

4、在公共的tabbar页面根据角色标识判断展示对应的组件（此组件为第2步创建的页面）。

5、在所有公共的tabbar页面的 onShow 函数中处理tabbar，以下是我的伪代码：

<script setup name="">  
import { onShow } from '@dcloudio/uni-app';  
import storage from '@/common/utils/storage.js';  

onShow(() => {  
    console.log(storage.getStorageSync('role'));  
    uni.setTabBarItem({  
        index: 0,  
        text: 'Home',  
        // pagePath: '/pages/tabbar/tea-home',  
        iconPath: '/static/images/tabbar/home.png',  
        selectedIconPath: '/static/images/tabbar/home-active.png',  
        complete: (e) => {  
            console.log('======= Home', e);  
        }  
    });  
});  
</script>

6、关于我为什么不使用 pagePath 这个属性直接替代页面，有三点给大家解释下：第一点：H5页面完全失效，刷新会失去tabbar；第二点：APP中系统杀死APP后再次进入会丢失tabbar；第三点：如果是自定义tabbar会有闪烁的情况。

7、大家也可以尝试其他方案，这只是本人遇到的问题及解决思路。