uniapp中动态tabbar实现

有时候根据业务的需求，需要实现权限，或者是动态底部的导航栏，这是其中一种实现方法，我自己就用。
此方法需要借助uView的自定义导航栏
按照正常的方法引入uView，在需要用到导航栏的页面引入即可。
不过page.json里也要正常配置

需要用到的页面

<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
这是封装权限的目录

// 个人用户
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

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 配置

import store from './store'
Vue.prototype.$store = store

封装可以全局调用的方法，在需要的地方调用，实时改变底部导航栏

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];
   },
};

在登录成功，退出账号，再次登录，或者切换身份等调用

// 只调用一次，避免二次渲染，退出登录，清除this.$storage.clear()
let isTabbar = this.$storage.get("isTabbar");

if (isTabbar == "") {
  this.$storage.set("isTabbar", 1);
  this.$storage.changeList()
}