最近在一個(gè)uni-app項(xiàng)目中遇到一個(gè)需求,在登錄頁(yè)面成功登錄以后需要判斷身份,不同的身份的進(jìn)入不同的tabBar頁(yè)面,但是在uni-app項(xiàng)目中pages.json中的tabBar的list數(shù)組只有一個(gè)，且不能寫(xiě)成動(dòng)態(tài)的,那如何實(shí)現(xiàn)這個(gè)需求呢?答案是需要我們自定義tabBar。

1、我們確定在 pages.json文件中的pages數(shù)組中的第一個(gè)頁(yè)面就是進(jìn)入程序時(shí)展示的第一個(gè)頁(yè)面,那這個(gè)頁(yè)面肯定就是我們的登錄頁(yè)面了。

2、將pages.json中的tabBar的list設(shè)置為空數(shù)組,即不再使用默認(rèn)系統(tǒng)自帶的tabBar組件。

3、創(chuàng)建tabBar.vue組件,組件內(nèi)的代碼內(nèi)容如下。

<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="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            selectedIndex: { // 當(dāng)前選中的tab index
                default: 0
            },
        },
        data() {
            return {
                color: "#666666",
                selectedColor: "#00BAB2",
                list: [],
                currentIndex:0,
            }
        },
        created() {
            this.currentIndex = this.selectedIndex;
            
            var _this = this
            
            if (uni.getStorageSync('identify') == 'nurse') {
                //護(hù)士
                _this.list = [{
                        "pagePath": "/pages/nursehome/nursehome",
                        "iconPath": "/static/tab/home_n.png",
                        "selectedIconPath": "/static/tab/home_s.png",
                        "text": "首頁(yè)"
                    },
                    {
                        "pagePath": "/pages/personalcenter/personalcenter",
                        "iconPath": "/static/tab/personal_n.png",
                        "selectedIconPath": "/static/tab/personal_s.png",
                        "text": "我的"
                    }
                ]
            } else {
                //醫(yī)管
                _this.list = [{
                        "pagePath": "/pages/home/home",
                        "iconPath": "/static/tab/home_n.png",
                        "selectedIconPath": "/static/tab/home_s.png",
                        "text": "首頁(yè)"
                    },
                    {
                        "pagePath": "/pages/nurse/nurselist",
                        "iconPath": "/static/tab/nurse_n.png",
                        "selectedIconPath": "/static/tab/nurse_s.png",
                        "text": "護(hù)士"
                    },
                    {
                        "pagePath": "/pages/personalcenter/personalcenter",
                        "iconPath": "/static/tab/personal_n.png",
                        "selectedIconPath": "/static/tab/personal_s.png",
                        "text": "我的"
                    }
                ]
            }
        },
        methods: {
            switchTab(item, index) {
                this.currentIndex = index;
                
                let url = item.pagePath;
                uni.redirectTo({url: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>

這里需要注意：里面的圖片路徑要寫(xiě)成絕對(duì)路徑，不然打包的時(shí)候如果是在該項(xiàng)目下的頁(yè)面會(huì)出現(xiàn)層級(jí)問(wèn)題，顯示不出來(lái)圖片

4、在main.js文件中將自定義的tabBar定義為全局組件。

import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)

5、在每一個(gè)原本將要設(shè)置為tabBar的子頁(yè)面添加我們自定義的tabBar組件。

//首頁(yè)
<tabBar selectedIndex = 0></tabBar>

//護(hù)士列表
<tabBar selectedIndex = 1></tabBar>

6、登錄頁(yè)面中成功登錄以后的頁(yè)面的切換邏輯。

if(this.data.identify == '護(hù)士'){
    uni.setStorageSync('identify','nurse')
}else{
    uni.setStorageSync('identify','manager')
}

uni.reLaunch({
    url:'../home/home'
})