### 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() } ```