uniapp 需要自定義tabBae 根據(jù)全向來展示tabBar的數(shù)據(jù)日熬，
首先 pages.json 頁面配置tabBar頁面

image.png

只要 pagePath 就行
然后在根目錄 創(chuàng)建 utils/ tabBar.js

// 主要權(quán)限
const member = [
    {
        "pagePath": "/pages/StoreHomePage/index",
        "iconPath": require("../static/p1.png"),
        "selectedIconPath": require("../static/p2.png"),
        "text": "主頁"
    },
    {
        "pagePath": "/pages/VehicleRecoveryOrder/index",
        "iconPath": require("../static/p3.png"),
        "selectedIconPath": require("../static/p4.png"),
        "text": "訂單"
    },
    {
        "pagePath": "/pages/My/index",
        "iconPath": require("../static/p5.png"),
        "selectedIconPath": require("../static/p6.png"),
        "text": "我的"
    }
]
 
//別的權(quán)限
const unloadVessel = [
    {
        "pagePath": "/pages/index/index",
        "iconPath": require("../static/p1.png"),
        "selectedIconPath": require("../static/p2.png"),
        "text": "主頁"
    },
    {
        "pagePath": "/pages/My/index",
        "iconPath":require("../static/p5.png"),
        "selectedIconPath":require("../static/p6.png"),
        "text": "我的"
    }
]
 
export default {
    member,//裝船權(quán)限名  最后要存入 isMemberType里
    unloadVessel//卸船權(quán)限名 最后要存入 isMemberType里
}

然后利用vuex 來進行保存 uniapp不用下載 直接引入
官網(wǎng)：https://uniapp.dcloud.net.cn/tutorial/vue3-vuex.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex

image.png

import tarBarUserType from '@/utils/tabBar.js';

const tabBar = {
    state: {
        // 判斷是否已登錄(member/notMember)
        isMemberType: '',
        // tabbar列表數(shù)據(jù)
        tabBarList: []

    },
    mutations: {
        setType(state, isMemberType) {
            console.log(state,isMemberType,123);
            state.isMemberType = isMemberType;
            state.tabBarList = tarBarUserType[isMemberType];
        }
    }
}

export default tabBar;

store/index

import Vue from 'vue'
import Vuex from 'vuex'
// import { createStore } from 'vuex'
import tabBar from './modules/tabBar.js'
// import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        tabBar
    },
    state: {
        //
        zp: 'zp'
    },
    mutations: {
        //
    },
    actions: {
        //
    },
    getters : {
        tabBarList: state => state.tabBar.tabBarList,
        isMemberType: state => state.tabBar.isMemberType,
    }
})

然后封裝一個 公用組件

<template>
    <view class="tab-bar">
        <view class="content">
            <view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
                <view>
                    <view class="tab-img">
                        <image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
                        <image v-else class="img" :src="item.iconPath"></image>
                    </view>
                </view>
                <view class="tit">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 底部導(dǎo)航欄數(shù)據(jù)
        tabBarList: {
            type: Array,
            required: true
        },
        // 當(dāng)前頁面路徑
        routePath: {
            type: String,
            required: true
        }
    },
    data() {
        return {};
    },
    methods: {
        selectTabBar(path) {
            console.log(path);
            this.$emit('onTabBar', path)
        }
    }
};
</script>

<style lang="scss" scoped>
.tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 0rpx;
        padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        padding-top: 5px;
        // background-color: red;
        // height:80rpx;
 
 
        .content {
            display: flex;
            flex-direction: row;
 
            .one-tab {
 
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                // background-color: pink;
 
                .tab-img {
                    width: 50rpx;
                    height: 50rpx;
 
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
 
                .tit {
                    font-size: 25rpx;
                    transform: scale(0.7);
                }
            }
        }
    }
</style>

然后使用的頁面

<template>
    <view class="_abbr1">
        <TabBer  :tabBarList='tabBarList' routePath="/pages/index/index" @onTabBar="onTabBar" />
    </view>
</template>

<script>
    import TabBer from '@/components/TabBer/index.vue'
    import store from '@/store/index.js';
    export default {
        components: {
            TabBer
        },
        data() {
            return {
                
                
            }
        },
        computed: {
            tabBarList() {
            
                return store.getters.tabBarList
            }
        },
        onLoad() {
            // member
            
        },
        methods: {
            onTabBar(path){
                uni.switchTab({
                    url:path
                })
        
            },
        }
    }
</script>

<style scoped>
    
</style>

最后在APP.vue中 根據(jù)權(quán)限來顯示展示什么tabBar

onShow: function() {

    uni.hideTabBar({}); //隱藏tabbar
//根據(jù) 條件來展示
      if(1==1){
          store.commit('setType', 'unloadVessel');
       }else{
          store.commit('setType', 'myTabBar');
        }
    
            
},

摘錄鏈接：https://blog.csdn.net/JunVei/article/details/126969160