uni-app使用uview-ui实现动态更改底部tabbar

需求：根据不同的权限（用户 0， 物业 1）展示不同的tabbar
这里使用的是[email protected] tabbar

• 1. 在utils文件夹下新建一个tabbar.js文件，来存储不同权限下的底部导航数据

// 用户tabbar
let tabUser = [
	{
    
    
		"pagePath": "/pages/index/index",
		"text": "首页",
		"iconPath": "/static/icon_bx.png",
		"selectedIconPath": "/static/icon_bx_hover.png"
	},
	{
    
    
		"pagePath": "/pages/index1/index",
		"text": "咨询",
		"iconPath": "/static/icon_adress.png",
		"selectedIconPath": "/static/icon_adress_hover.png"
	},
	{
    
    
		"pagePath": "/pages/index2/index",
		"text": "我的",
		"iconPath": "/static/icon_user.png",
		"selectedIconPath": "/static/icon_user_hover.png"
	}
]
// 物业tabbar
let tabPro = [
	{
    
    
		"pagePath": "/pages/index/index",
		"text": "首页",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
    
    
		"pagePath": "/pages/index1/index",
		"text": "咨询",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
    
    
		"pagePath": "/pages/index3/index",
		"text": "管理",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	},
	{
    
    
		"pagePath": "/pages/index2/index",
		"text": "我的",
		"iconPath": "/static/logo.png",
		"selectedIconPath": "/static/logo.png"
	}
]
export default [
	tabUser,
    tabPro]

• 2. 在page.json文件里，把tabbar里的几个页面去重放进去tabBar。

"tabBar": {
    
    
    "color": "#000",
    "selectedColor": "#567856",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text":""
      },
      {
    
    
        "pagePath": "pages/index1/index",
        "text":""
      },
      {
    
    
        "pagePath": "pages/index2/index",
        "text":""
      },
      {
    
    
        "pagePath": "pages/index3/index",
        "text":""
      }
    ]
  }

• 3. 使用vuex 新建store 文件夹存储相关数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import tabBar from '@/utils/tabbar.js'
const store = new Vuex.Store({
    
    
	state: {
    
    
		tabBarList: [],
		roleId: 0, //0 用户，1 物业
	},
	mutations: {
    
    
		// 设置角色ID
		setRoleId(state, data) {
    
    
			state.roleId = data;
			uni.setStorageSync('roleId',data)
			state.tabBarList = tabBar[data];
			uni.setStorageSync('tabBarList',tabBar[data])
		},
	},
})
export default store

• 4. 在入口文件 main.js 中使用

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
import store from './store/index'

Vue.use(uView);

Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
    
    
    store,
    ...App
})
app.$mount()

• 5. 在components中新建tabBar.vue 组件

<template>
  <view>
    <u-tabbar
      :list="tabBarList"
      @change="change"
      v-model="current"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :height="110"
      :border-top="borderTop"
    >
    </u-tabbar>
  </view>
</template>
<script>
export default {
    
    
  props: {
    
    
    tabBarList: {
    
    
      type: Array,
      default: () => uni.getStorageSync("tabBarList"),
    },
  },
  data() {
    
    
    return {
    
    
      borderTop: true,
      inactiveColor: "#000",
      activeColor: "#987435",
      current: 0,
    };
  },
  methods: {
    
    
    change(e) {
    
    
      const tabbar = uni.getStorageSync("tabBarList");
      console.log(tabbar);

      switch (e) {
    
    
        case 0:
          uni.switchTab({
    
    
            url: tabbar[0].pagePath,
          });
          break;
        case 1:
          uni.switchTab({
    
    
            url: tabbar[1].pagePath,
          });
          break;
        case 2:
          uni.switchTab({
    
    
            url: tabbar[2].pagePath,
          });
          break;
        case 3:
          uni.switchTab({
    
    
            url: tabbar[3].pagePath,
          });
          break;
        default:
          uni.switchTab({
    
    
            url: tabbar[0].pagePath,
          });
          break;
      }
    },
  },
};
</script>

• 6. 登录时，获取后端返回的权限这里没有接口就写死啦，然后再调用store里的setRole方法

<template>
  <view class="content">
    <u-button type="primary" text="登录" @click="login"></u-button>
  </view>
</template>

<script>
import {
    
     mapMutations } from "vuex";
export default {
    
    
  data() {
    
    
    return {
    
    
      roleId: 1,
    };
  },
  methods: {
    
    
    ...mapMutations(["setRoleId"]),
    login() {
    
    
      this.setRoleId(this.roleId); // 0或者1
      uni.switchTab({
    
    
        url: "../index/index", // 跳转到首页
      });
    },
  },
};
</script>

• 7. tabbar页面使用组件

<template>
    <div>
      <tabBar />
    </div>
  </template>
  
  <script>
  import tabBar from '../../components/tabBar.vue';
  export default {
    
    
    components: {
    
    
      tabBar
    },
    data() {
    
    
      return {
    
    
        
      }
    }
  }
  
  </script>
  
  <style>
  
  </style>