uni-app自定义tabBar

一个项目有多个角色，比如医生和患者，tabBar跳转的路径不一样，但是在pages.json中无法配置多个tabBar，这时候就要自定义tabBar了

下面一个小小demo，场景是医生和患者端，一共四个不同的页面，分别是医生首页，患者首页，医生我的页面，患者我的页面，tabbar要求根据不同的角色跳转到对应的路径

（一）配置pages.json

custom设置为true，并且把所有需要切换的页面都配置在list中，否则之后切换tab用switchTab方法无效

"tabBar": {
		"custom": true, 
		"color": "#333333",
		"selectedColor": "#4256A8",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/patientHome/patientHome",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home_s.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/images/mine.png",
				"selectedIconPath": "static/images/mine_s.png",
				"text": "我的"
			},
            {
				"pagePath": "pages/doctorDine/doctorDine",
				"iconPath": "static/images/mine.png",
				"selectedIconPath": "static/images/mine_s.png",
				"text": "我的"
			},
			{
				"pagePath": "pages/volunteerHome/volunteerHome",
				"iconPath": "static/images/mine.png",
				"selectedIconPath": "static/images/home_s.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/pharmacyHome/pharmacyHome",
				"iconPath": "static/images/mine.png",
				"selectedIconPath": "static/images/home_s.png",
				"text": "首页"
			}
		]
	}

（二）tab-bar.vue 组件

（三）不同的角色调用tabBar

医生端：

患者端：

我的页面：

（四）最后效果：

不同角色下，点击的tab可以切换到对应的页面

 

组件还有很多可扩展的地方，因为demo中tabBar的差异仅是跳转路径不同，所以对index做判断从而做特殊处理即可，

还有一些不同页面tabBar差异较大的场景，可以考虑根据不同的角色获取不同的tabBar list