uni-app自定义tabBar

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

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

（一）配置pages.json

"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

医生端：

患者端：

我的页面：