uniapp 实现不同用户展示不同的tabbar(底部导航栏)

一、背景

最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件

二、效果展示

2.1、角色1：admin账号登录效果

2.2、角色2：tom账户登录效果

三、前置工作

3.1、将登录页面作为用户进入小程序展示的第一个页面，pages.json文件中的pages数组第一个设为login页面

3.2、pages.json配置tabbar的基本路径（只需路径即可）

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/login/login",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		},
    {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": ""
			}
		}
	    ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/warn/warn",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
  "tabBar": {
    "color": "#999",
    "selectedColor": "#0aa671",
    "borderStyle": "white",
    "list": [
        {
            "pagePath": "pages/index/index"
        },
        {
            "pagePath": "pages/warn/warn"
        },
        {
            "pagePath": "pages/my/my"
        }
    ]
  }
}

四、创建tabbar组件

4.1、第一步：在项目中创建components文件夹，并在文件夹下创建tabbar组件

tabbar组件具体代码如下：

注意： 跳转路径：pagePath以/开头

说明：tab_img可以修改图标大小，tab_text可以修改文字大小

4.2、第二步： 在main.js文件中将自定义的tabBar定义为全局组件

//⭐⭐ main.js 文件
import tabBar from "@/components/tabbar/tabbar.vue"
Vue.component('tabBar',tabBar)

4.3、第三步：在需要使用的页面引入tabbar组件

//如 index页面


//如 warn 页面



//如 my 页面

4.4、第四步：隐藏pages.json里配置的导航栏，使用封装的tabbar组件，在需要引入tabbar组件的页面进行配置

//如 warn 页面

五、登录页面根据不同身份进行tabbar切换逻辑

//登录 login 页面

六、问题拓展

6.1、问题：当是角色1时，点击tabbar我的页面文字和图标造成颜色闪烁

6.2、原因：selectedIndex 被设置为超出角色1 tab 的索引范围。在这种情况下，currentIndex 的默认值为0，而将 selectedIndex 设置为2 会导致 currentIndex 与实际选中的 tab 不一致，进而导致文字和图标显示颜色发生闪烁。

6.3、解决：在传递 selectedIndex 给 组件时进行判断，并确保它不会超出角色1 tab 的索引范围

6.4、重新修改my页面

// my 页面

PS：如果对你有帮助的话，请给个赞，有问题欢迎大家在评论区讨论。ღ( ´･ᴗ･` )  ღ( ´･ᴗ･` )