uni-app 实现自定义tabBar显示

第一步

声明一个tabBar.js 用于存储 下方tabBar 信息

const myTodo = {
    "pagePath": "pages/myTodoList/index",
    "iconPath": "/static/images/tabbar/my-todo-list.png",
    "selectedIconPath": "/static/images/tabbar/my-todo-list-h.png",
    "text": "我的待办"
};

const history = {
   "pagePath": "pages/history/index",
   "iconPath": "/static/images/tabbar/history-h.png",
   "selectedIconPath": "static/images/tabbar/history.png",
    "text": "历史记录",
};

const enterprise = {
    "pagePath": "pages/enterprise/index",
    "iconPath": "/static/images/tabbar/enterprise-h.png",
    "selectedIconPath": "/static/images/tabbar/enterprise.png",
    "text": "涉企收费监测"
};
const user = {
    "pagePath": "pages/user/index",
    "iconPath": "/static/images/tabbar/individual-h.png",
    "selectedIconPath": "/static/images/tabbar/individual.png",
    "text": "个人中心"
};



export {
    myTodo,
    history,
    enterprise,
    user
}

第二步

在pages.json文件中 禁用所有小程序自带 tabBar

    "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/index",
            "style": {
                "navigationStyle": "custom" //取消默认导航栏样式
            }
        },
        {
            "path": "pages/myTodoList/index",
            "style": {
                "navigationBarTitleText": "我的待办"
                // "enablePullDownRefresh": true
            },
            // 在这里进行禁用
            "tabBar" :false
        },
        ...
    ],
    
    
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#007AFF",
        "borderStyle": "black",
        "backgroundColor": "#F8F8F8",
        "iconWidth": "35px",
        "iconHeight": "50px",
        "list": [{
                // 留下这一行
                "pagePath": "pages/myTodoList/index"
                // "iconPath": "static/images/tabbar/my-todo-list.png",
                // "selectedIconPath": "static/images/tabbar/my-todo-list-h.png",
                // "text": "我的待办"
            },
            ...
        ]
    },

第三步

在store中声明相关数据

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import Http from "@/http/api.js";
import {
    AppLogin, getTabBarRole
} from "@/api/login/index.js";
import {
    profile,
    logout
} from "@/api/user/index.js";
import { myTodo, history, enterprise, user as userPage } from "../utils/tabBar";
const store = new Vuex.Store({
    state: {
        ...
        tabBarRole: [],
        dynamicTabbar: [] // 动态tabbar
    },
    mutations: {
        ...
        UPDATE_TABBAR(state, payload) {
            state.dynamicTabbar = payload
        },
        UPDATE_TABBAR_ROLE(state, payload) {
            state.tabBarRole = payload
        }
    },
    actions: {
        // 登录
        Login({
            commit
        }, userInfo) {
            return new Promise((resolve, reject) => {
                AppLogin(userInfo)
                    .then((res) => {
                        uni.setStorageSync("TOKEN", res.token);
                        commit("SET_TOKEN", res.token);
                        resolve(res);
                    })
                    .catch((error) => {
                        reject(error);
                    });
            });
        },
        // 获取用户信息
        GetInfo({
            commit,
            state
        }, token) {
            return new Promise((resolve, reject) => {
                getTabBarRole().then((res) => {
                    if(res.code === 200){
                        commit('UPDATE_TABBAR_ROLE', res.data)
                    }
                })
                profile(token)
                    .then((res) => {
                        const user = res.data;
                        const arr = [];
                        const addedLabels = new Set(); // 用于跟踪已添加的标签，避免重复
                        const userRoleKeys = user.roles.map(role => role.roleKey); //提前提取角色键数组
                        console.log(state.tabBarRole)
                        // 使用对象映射优化条件判断
                        const labelMap = {
                          '我的待办': myTodo,
                          '历史记录': history,
                          '涉企收费监测': enterprise,
                          '个人中心': userPage
                        };
                        state.tabBarRole.forEach((item) => {
                            // 检查当前tabBar项的权限是否包含用户任一角色
                              const hasPermission = item.dictValue.split(',')
                                .some(requiredRole => userRoleKeys.includes(requiredRole));
                            if (hasPermission) {
                                
                            
                                const targetItem = labelMap[item.dictLabel];
                                
                                // 只有当标签存在且未添加时才push
                                if (targetItem && !addedLabels.has(item.dictLabel)) {
                                  arr.push(targetItem);
                                  addedLabels.add(item.dictLabel);
                                }
                              }
                        })
                        commit('UPDATE_TABBAR', arr)
                        resolve(res);
                    })
                    .catch((error) => {
                        // uni.switchTab({
                        // 	url: "/pages/myTodoList/index",
                        // });
                        reject(error);
                    });
            });
        },
        // 退出系统
        LogOut({
            commit,
            state
        }) {
            return new Promise((resolve, reject) => {
                logout(state.token)
                    .then(() => {
                        commit("SET_TOKEN", "");
                        uni.removeStorageSync("TOKEN");
                        resolve();
                    })
                    .catch((error) => {
                        reject(error);
                    });
            });
        },
        // 添加tabBar
        changeTabbar({
            commit
        }, payload) {
            commit('UPDATE_TABBAR', payload)
        },
        // 添加tabBar
        changeTabbarRoles({
            commit
        }, payload) {
            commit('UPDATE_TABBAR_ROLE', payload)
        },
    },
});

export default store;

第四步

在每一个tabBar 页面 添加自定义TabBar

<template>
    <view class="app-container">
        ...
        <u-tabbar
          :value="current"
          @change="ChangBar"
           :fixed="true"
                     :active-color="activeColor"
                     :inactive-color="inactiveColor"
          :safeAreaInsetBottom="true"
        >
          <u-tabbar-item v-for="(v, i) in tabBarList" :text="v.text" :name="i" :icon="current == i ? v.selectedIconPath : v.iconPath">
                    </u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
    export default {
        components: {
            myTabbar
        },
        data() {
            return {
                // 底部tabBar
                tabBarList: this.$store.state.dynamicTabbar,
                current: this.$store.state.dynamicTabbar.findIndex(v => v.text == '个人中心'),
                borderTop: true,
                inactiveColor: '#909399',
                activeColor: '#5098FF',
                // ...
            };
        },
        onShow() {},
        methods: {
            ChangBar(e) {
                uni.switchTab({
                    url: '/' + this.tabBarList[e].pagePath
                })
            },
        },
    };
</script>