### uniapp中動態tabbar實現 有時候根據業務的需求，需要實現權限，或者是動態底部的導航欄，這是其中一種實現方法，我自己就用。 此方法需要借助uView的自定義導航欄 按照正常的方法引入uView，在需要用到導航欄的頁面引入即可。 不過page.json里也要正常配置 > 需要用到的頁面 ```vue <template> <view class="body"> <u-tabbar v-model="current" :before-switch="beforeSwitch" active-color="#1d6869" :list="tabarList"></u-tabbar> </view> </template> <script> import { mapState, mapMutations } from "vuex"; export default { components: {}, data() { return {}; }, computed: { ...mapState(["tabarList"]), }, onLoad() {}, methods: { ...mapMutations(["setTabarList"]), beforeSwitch(index) { if (this.tabarList[index].text == "客服") { this.kfshow = true; return false; } else { return true; } }, } }; </script> <style lang="scss" scoped> </style> ``` > 創建目錄utils/tabBar.js > 這是封裝權限的目錄 ```javascript // 個人用戶 const member = [{ iconPath: "home", selectedIconPath: "home-fill", text: '個人首頁', customIcon: false, pagePath: '/pages/index/index', }, { iconPath: "account", selectedIconPath: "account-fill", text: '我的', isDot: false, pagePath: '/pages/my/my', }, ] // 企業用戶 const firm = [ { iconPath: "account", selectedIconPath: "account-fill", text: '企業首頁', isDot: false, pagePath: '/pages/enterprise/enterprise' }, { iconPath: "account", selectedIconPath: "account-fill", text: '我的', isDot: false, pagePath: '/pages/my/my', }, ] export default { member, firm } ``` > 利用vuex，創建目錄store/index.js ```javascript import Vue from 'vue' import Vuex from 'vuex' import storage from '../common/storage' import tabBar from '@/untils/tabBar.js' Vue.use(Vuex) // 獲取用戶的類型，也可以根據業務判斷具體的權限 let userInfo = storage.getJson('userInfo') let type = 'member' if(userInfo != null){ switch(userInfo.utype){ case '1': type = 'member' break; case '2': type = 'firm' break; default: break; } } const store = new Vuex.Store({ state: { tabarList: tabBar[type], // 動態底部導航欄 }, mutations: { setTabarList(state, list) { state.tabarList = list }, }, getters: { }, actions: { } }) export default store ``` > main.js 配置 ```javascript import store from './store' Vue.prototype.$store = store ``` > 封裝可以全局調用的方法，在需要的地方調用，實時改變底部導航欄 ```javascript import storage from "./storage"; import store from '../store' import tabBar from '@/untils/tabBar.js' export default { set(name, value) { uni.setStorageSync(name, value); }, get(name) { return uni.getStorageSync(name); }, remove(name) { uni.removeStorageSync(name); }, clear() { uni.clearStorageSync(); }, changeList() { let userInfo = storage.getJson("userInfo"); let type = "member"; if (userInfo != null) { switch (userInfo.utype) { case "1": type = "member"; break; case "2": type = "firm"; break; default: break; } } store.state.tabarList = tabBar[type]; }, }; ``` > 在登錄成功，退出賬號，再次登錄，或者切換身份等調用 ```javascript // 只調用一次，避免二次渲染，退出登錄，清除this.$storage.clear() let isTabbar = this.$storage.get("isTabbar"); if (isTabbar == "") { this.$storage.set("isTabbar", 1); this.$storage.changeList() } ```