<meta charset="utf-8">

一個項目有多個角色寞焙，比如醫(yī)生和患者储狭，tabBar跳轉(zhuǎn)的路徑不一樣，但是在pages.json中無法配置多個tabBar捣郊，這時候就要自定義tabBar了

下面一個小小demo辽狈，場景是醫(yī)生和患者端，一共四個不同的頁面呛牲，分別是醫(yī)生首頁刮萌，患者首頁，醫(yī)生我的頁面娘扩，患者我的頁面着茸，tabbar要求根據(jù)不同的角色跳轉(zhuǎn)到對應(yīng)的路徑

（一）配置pages.json

custom設(shè)置為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 組件

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

                }
                // 對應(yīng)患者和醫(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

記得每個頁面都要導入并注冊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>

我的頁面：

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

作者：hao_developer
鏈接：http://www.reibang.com/p/18d8c7ad7da4
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)灰殴，非商業(yè)轉(zhuǎn)載請注明出處敬特。