uniapp中动态底部导航栏tabbar实现，权限管理

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