需求：根據(jù)不同的權(quán)限（用戶 0， 物業(yè) 1）展示不同的tabbar
這里使用的是uview-ui@1.8.4 tabbar文章來源地址http://www.zghlxwxcb.cn/news/detail-525966.html

• 1. 在utils文件夾下新建一個(gè)tabbar.js文件，來存儲(chǔ)不同權(quán)限下的底部導(dǎo)航數(shù)據(jù)

// 用戶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"
	}
]
// 物業(yè)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里的幾個(gè)頁面去重放進(jìn)去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 文件夾存儲(chǔ)相關(guān)數(shù)據(jù)

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 物業(yè)
	},
	mutations: {
		// 設(shè)置角色I(xiàn)D
		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. 登錄時(shí)，獲取后端返回的權(quán)限這里沒有接口就寫死啦，然后再調(diào)用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", // 跳轉(zhuǎn)到首頁
      });
    },
  },
};
</script>

• 7. tabbar頁面使用組件

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

到了這里，關(guān)于uni-app使用uview-ui實(shí)現(xiàn)動(dòng)態(tài)更改底部tabbar的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！