<meta charset="utf-8">

一個(gè)項(xiàng)目有多個(gè)角色，比如醫(yī)生和患者，tabBar跳轉(zhuǎn)的路徑不一樣，但是在pages.json中無(wú)法配置多個(gè)tabBar，這時(shí)候就要自定義tabBar了

下面一個(gè)小小demo，場(chǎng)景是醫(yī)生和患者端，一共四個(gè)不同的頁(yè)面，分別是醫(yī)生首頁(yè)，患者首頁(yè)，醫(yī)生我的頁(yè)面，患者我的頁(yè)面，tabbar要求根據(jù)不同的角色跳轉(zhuǎn)到對(duì)應(yīng)的路徑

（一）配置pages.json

custom設(shè)置為true，并且把所有需要切換的頁(yè)面都配在list中，否則之后切換tab用switchTab方法無(wú)效；

"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": "首頁(yè)"
            },
            {
                "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": "首頁(yè)"
            },
            {
                "pagePath": "pages/pharmacyHome/pharmacyHome",
                "iconPath": "static/images/mine.png",
                "selectedIconPath": "static/images/home_s.png",
                "text": "首頁(yè)"
            }
        ]
    }

（二）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: { // 當(dāng)前選中的tab index
                type: Number,
                default: 0
            },
            userIdentity: { // 當(dāng)前角色
                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: "首頁(yè)"
                }, {
                    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;
                // 對(duì)應(yīng)患者和醫(yī)生的首頁(yè)
                if (index == 0) {
                    switch (this.userIdentity) {
                        // 患者
                        case 0:
                            url = "/pages/patientHome/patientHome"
                            break
                        // 醫(yī)生
                        case 1:
                            url = "/pages/doctorHome/doctorHome"
                            break
                    }

                }
                // 對(duì)應(yīng)患者和醫(yī)生的我的頁(yè)面
                if (index == 1) {
                    switch (this.userIdentity) {
                        // 患者
                        case 0:
                            url = "/pages/mine/mine"
                            break
                        // 醫(yī)生
                        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>

（三）不同的角色調(diào)用tabBar

記得每個(gè)頁(yè)面都要導(dǎo)入并注冊(cè)tab-bar自定義組件

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

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

醫(yī)生端：

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

患者端：

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

我的頁(yè)面：

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

作者：hao_developer
鏈接：http://www.itdecent.cn/p/18d8c7ad7da4
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。