uniapp 按权限自定义底部tabbar

### 实现 UniApp 动态生成带权限控制的自定义 Bottom TabBar #### 1. 封装 TabBar 组件 在 `components` 目录下创建一个新的组件文件夹，命名为 `CustomTabBar` 并编写其逻辑。此组件负责渲染动态生成的 TabBar。 ```vue <template> <view class="tab-bar"> <block v-for="(item, index) in tabbarData" :key="index"> <view class="tab-item" @click="switchPage(item.pagePath)"> <image :src="currentRoute === item.pagePath ? item.selectedIconPath : item.iconPath"></image> <text :class="{ active: currentRoute === item.pagePath }">{{ item.text }}</text> </view> </block> </view> </template> <script> export default { props: ['tabbarData', 'currentRoute'], methods: { switchPage(pagePath) { uni.switchTab({ url: pagePath }); } } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; background-color: white; border-top: 1px solid #e0e0e0; padding: 10px 0; } .tab-item { text-align: center; } .active { color: blue; } </style> ``` #### 2. 定义 TabBar 数据结构 根据用户的权限，在 Vuex 或本地状态管理工具中存储对应的 TabBar 配置数据。以下是可能的数据结构： ```javascript const tabbarData = [ { "pagePath": "/pages/index/index", "iconPath": "/static/tabBar/home_gray.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "首页" }, { "pagePath": "/pages/user/user", "iconPath": "/static/tabBar/user_gray.png", "selectedIconPath": "/static/tabBar/user_col.png", "text": "我的" } ]; ``` #### 3. 获取并处理用户权限 通过后端接口获取当前用户的权限列表，并将其映射为实际可用的 TabBar 页面路径[^2]。假设后端返回如下权限数据： ```json { "permissions": ["home", "profile"] } ``` 前端可以基于这些权限过滤出有效的 TabBar 条目： ```javascript function filterTabsByPermission(permissions, allTabs) { return allTabs.filter(tab => permissions.includes(tab.permission)); } // 假设全量 TabBar 列表 const allTabs = [ { permission: "home", ... }, { permission: "settings", ... } ]; // 用户权限 const userPermissions = ["home"]; // 计算最终显示的 Tabs const filteredTabs = filterTabsByPermission(userPermissions, allTabs); ``` #### 4. 存储至 Vuex 将计算后的 TabBar 数据存入 Vuex 的全局状态中以便各处访问[^1]。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { tabBarList: [] }, mutations: { SET_TABBAR_LIST(state, list) { state.tabBarList = list; } }, actions: { async fetchUserPermissionsAndSetTabBar({ commit }) { const response = await uni.request({ url: '/api/get-user-permissions' }); // 替换为真实 API 地址 const permissions = response.data.permissions; const allTabs = [...]; // 初始化全量 TabBar 数据 const filteredTabs = filterTabsByPermission(permissions, allTabs); commit('SET_TABBAR_LIST', filteredTabs); } } }); ``` #### 5. 引入组件到页面 在需要展示 TabBar 的页面中引入封装好的 `CustomTabBar` 组件，并绑定 Vuex 中的状态数据。 ```vue <template> <view> <!-- 主体内容 --> <custom-tab-bar :tabbar-data="tabBarList" :current-route="currentRoute"></custom-tab-bar> </view> </template> <script> import CustomTabBar from '@/components/CustomTabBar.vue'; import { mapState } from 'vuex'; export default { components: { CustomTabBar }, computed: { ...mapState(['tabBarList']), currentRoute() { return this.$route.path; } } }; </script> ``` #### 6. 修改 `pages.json` 为了支持动态 TabBar 渲染，需确保 `pages.json` 文件中的 `tabBar` 字段为空或仅作为占位符存在[^3]。 ```json { "tabs": true, "usingComponents": {}, "globalStyle": {} } ``` --- ### 总结 上述流程涵盖了从权限获取、数据筛选、Vuex 状态管理以及组件化开发等多个方面，能够有效实现 UniApp 下基于权限动态生成 Bottom TabBar 的需求。