uniapp 根据不同权限设置不同的原生tabbar(不同数量也可以)--（不支持小程序）_uniapp两种不同角色登录显示不同的底部

效果：

权限1：

权限2：

本内容解决了：

1. 根据不同权限展示不同tabbar；
2. 为uni原生tabbar，避免了自己写组件后的跳转闪烁问题；
3. 可以实现不同权限tabbar内容数量不同
4. 设置了全局方法，只需要所有权限的tabbar页面调用即可
5. 在设置过程中，整合了tabbar设置过程，整个代码只需设置一次

原理：

1. 权限通过缓存获取（登录后设置一个判断字段存入缓存中）
2. 通过不同权限后根据uni.setTabBarItem()方法实现

实现：

1、在page.json 文件中把所有可能会设置为tabbar的页面都写入tabbar中；（友情提示，按照权限排列写，这样展示和隐藏比较方便）

代码（这里只贴tabbar设置格式，具体自行修改）：

"tabBar": {
        "color": "#999999",
        "selectedColor": "#579aff",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/assistant_police/index/index",
                "iconPath": "static/image/assistant_police-icon/tab-bottom/icon-home.png",
                "selectedIconPath": "static/image/assistant_police-icon/tab-bottom/icon-home-select.png",
                "text": "1"
            },{//...别的tabbar页面}]

如图（我设置的tabbar）：

2、在登录后存入缓存

代码： 

uni.setStorageSync("userType", 1);

（我这里userType = 1为权限1 ，userType = 2为权限2）

3、在app.vue中注入方法：

代码：

//修改动态tabbar
            reviseTabbarByUserType: function() {
                let userType = uni.getStorageSync('userType') ? uni.getStorageSync('userType') : 1;
                //权限1
                if(userType == 1){
                    uni.setTabBarItem({
                        index: 4,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 5,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 6,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 7,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 8,
                        visible: false,
                    })
                }else{
                    uni.setTabBarItem({
                        index: 0,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 1,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 2,
                        visible: false,
                    })
                    uni.setTabBarItem({
                        index: 3,
                        visible: false,
                    })
                }
            }

如图：

4、在所有的tabbar页面统一调用：

getApp().globalData.reviseTabbarByUserType();

（建议在onShow方法中调用）

我其实还在app.vue中的onShow方法也调用了

tips:

产生的问题： 当登录后跳转到首页没有tabbar，这可能是tabbar未渲染的原因；

解决办法1： 登录页面登录成功后跳转首页时传递一个参数，首页判断如果成立，刷新一下（我这里设置的是type=1）；

首页代码：

onLoad(options) {
            if(options.type == 1){
                location.href();
            }
        },

解决办法2：

在跳转页面时，可以直接把刷新写入success方法中

跳转页面代码：

uni.switchTab({
                            url: '/pages/assistant_police/index/index',
                            success() {
                                location.reload();
                            },
                        })

这样就做到了不同权限展示不同rabbar的需求啦~

欢迎交流！

本文为原创，转载请注明出处！