uniapp 自定义tabBar

uniapp 需要自定义tabBae 根据全向来展示tabBar的数据，
首先 pages.json 页面配置tabBar页面

image.png

只要 pagePath 就行
然后在根目录 创建 utils/ tabBar.js

// 主要权限
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": "我的"
    }
]
 
//别的权限
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,//装船权限名  最后要存入 isMemberType里
    unloadVessel//卸船权限名 最后要存入 isMemberType里
}

然后利用vuex 来进行保存 uniapp不用下载 直接引入
官网：https://uniapp.dcloud.net.cn/tutorial/vue3-vuex.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex

image.png
modules/tabBar.js 中的内容

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

const tabBar = {
    state: {
        // 判断是否已登录(member/notMember)
        isMemberType: '',
        // tabbar列表数据
        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: {
        // 底部导航栏数据
        tabBarList: {
            type: Array,
            required: true
        },
        // 当前页面路径
        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中 根据权限来显示展示什么tabBar

onShow: function() {

    uni.hideTabBar({}); //隐藏tabbar
//根据 条件来展示
      if(1==1){
          store.commit('setType', 'unloadVessel');
       }else{
          store.commit('setType', 'myTabBar');
        }
    
            
},

摘录链接：https://blog.csdn.net/JunVei/article/details/126969160