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

有时候根据业务的需求，需要实现权限，或者是动态底部的导航栏，这是其中一种实现方法，我自己就用。
此方法需要借助uView的自定义导航栏

uniapp中动态tabbar实现

按照正常的方法引入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()
}