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 组件

<template>
    <view class="tab-bar">
        <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
            <image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
 
</template>
 
 
 
<script>
    export default {
        props: {
            selected: { // 当前选中的tab index
                type: Number,
                default: 0
            },
            userIdentity: { // 当前角色
                type: Number,
                default: 0
            }
 
        },
        data() {
            return {
                color: "#333333",
                selectedColor: "#333333",
                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: "我的"
                }]
            }
        },
        methods: {
            switchTab(item, index) {
                console.log("item", item)
                console.log("index", index)
                let url = item.pagePath;
                // 对应患者和医生的首页
                if (index == 0) {
                    switch (this.userIdentity) {
                        // 患者
                        case 0:
                            url = "/pages/patientHome/patientHome"
                            break
                        // 医生
                        case 1:
                            url = "/pages/doctorHome/doctorHome"
                            break
                    }
 
                }
                // 对应患者和医生的我的页面
                if (index == 1) {
                    switch (this.userIdentity) {
                        // 患者
                        case 0:
                            url = "/pages/mine/mine"
                            break
                        // 医生
                        case 1:
                            url = "/pages/doctorMine/doctorMine"
                            break
                    }
 
                }
                uni.switchTab({
                    url
                })
 
            }
        }
    }
</script>
 
<style lang="scss">
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
 
        .tab-bar-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
 
            .tab_img {
                width: 37rpx;
                height: 41rpx;
            }
 
            .tab_text {
                font-size: 20rpx;
                margin-top: 9rpx;
            }
        }
    }
</style>

（三）不同的角色调用tabBar

<script>
    import tabBar from "@/components/tab-bar.vue"

    export default {
        components: {
            tabBar
        }
    }
</script>

医生端：

<tab-bar :userIdentity="1"></tab-bar>

患者端：

<tab-bar :userIdentity="0"></tab-bar>

我的页面：

<tab-bar :selected="1"></tab-bar>