uniapp添加自定義底部導航欄，實現根據權限動態切換底部欄目的功能

uni-app針對底部導航欄TabBar，只提供了動態修改樣式文字和圖標的API，并沒有提供動態修改某個欄目的跳轉鏈接、追加或者刪除某個欄目的功能。愛掏網 - it200.com

問題闡述：實際開發的項目中的確需要判斷登錄賬戶的權限，來動態顯示某兩個，或者某三個欄目

如：管理用戶顯示【首頁，管理，我的】，普通用戶顯示【首頁，我的】，中間的管理頁面，就得動態判斷是否要追加了

解決方案：隱藏原有的tabBar，添加自定義的底部導航欄

1、思路：參照原來導航欄的寫法，延用原來TabBar的樣式布局，在每個欄目的首頁添加自定義導航欄，并使用固定定位放在底部，自定義組件的具體代碼：

template>
    view class="uni-tabbar">
        view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
            view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?‘uni-active‘:‘‘]">view>
            
            view v-if="false" class="uni-tabbar__bd">
                view class="uni-tabbar__icon">
                    image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath">image>
                    image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath">image>
                view>
            view>
            view class="uni-tabbar__label" :class="{‘active‘: item.pagePath == pagePath}">
                {{item.text}}
            view>
        view>
    view>
template>

script>
    export default {
        props: {
            pagePath: null
        },
        data() {
            return {
                page: ‘contact‘,
                showPage: false,
                containerHeight: 400,
                tabbar: [
                    {
                        "pagePath": "/pages/tabBar/home/home",
                        "iconPath": "/static/tabBar/home.png",
                        "selectedIconPath": "/static/tabBar/home_col.png",
                        "text": "首頁",
                        "fontIcon": "icon-shouye"
                    },
　　　　　　　　　　　　// 這里是要動態切換的欄目，先隱藏，動態追加
                    // {
                    //     "pagePath": "/pages/tabBar/manage/manage",
                    //     "iconPath": "/static/tabBar/home.png",
                    //     "selectedIconPath": "/static/tabBar/home_col.png",
                    //     "text": "管理",
                    //     "fontIcon": "icon-guanli"
                    // },
                    {
                        "pagePath": "/pages/tabBar/person/person",
                        "iconPath": "/static/tabBar/person.png",
                        "selectedIconPath": "/static/tabBar/person_col.png",
                        "text": "我的",
                        "fontIcon": "icon-wode"
                    }
                ]
            };
        },
        mounted() {
            // true為判斷條件，根據實際的需求替換即可
            if(true) {
                this.tabbar.splice(1,0,
                    {
                        "pagePath": "/pages/tabBar/manage/manage",
                        "iconPath": "/static/tabBar/home.png",
                        "selectedIconPath": "/static/tabBar/home_col.png",
                        "text": "管理",
                        "fontIcon": "icon-guanli"
                    }
                )
            }
        },
        methods: {
            changeTab(item) {
                this.page = item.pagePath;
　　　　　　　　　　// 這里使用reLaunch關閉所有的頁面，打開新的欄目頁面
                uni.reLaunch({
                    url: this.page
                });
            },
        }
    }
script>

style lang="scss" scoped>

    [nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view {
        flex-direction: unset;
    }
    [nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view {
        flex-direction: unset;
    }
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 98upx;
        padding: 16upx 0;
        box-sizing: border-box;
        border-top: solid 1upx #ccc;
        background-color: #fff;
        box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
        .uni-tabbar__item {
            display: block;
            line-height: 24upx;
            font-size: 20upx;
            text-align: center;
        }
        .uni-tabbar__icon {
            height: 42upx;
            line-height: 42upx;
            text-align: center;
        }
        .icon {
            display: inline-block;
        }
        .uni-tabbar__label {
            line-height: 24upx;
            font-size: 24upx;
            color: #999;
            &.active {
                color: #1ca6ec;
            }
        }
    }
style>

?2、關于字體圖標的使用，因為自定義導航欄是放在每個頁面的首頁的，所以點擊底部導航欄切換頁面的時候，都會重新刷新加載，使用圖片的話就會出現閃一下的情況。愛掏網 - it200.com這里的話推薦使用阿里巴巴圖標庫，可以參考前面寫的文章：uni-app給頂部導航欄添加自定義字體圖標

uni-app添加自定義底部導航欄，實現根據權限動態切換底部欄目的功能