uView根据权限动态配置uni-app中的tabBar

在项目中遇到一个需求，根据不同的账号，生成不同的tabBar，刚开始考虑使用父组件中引入子组件的形式，奈何页面空白，什么也不显示于是，考虑使用自定义的tabbar实现。

项目技术：uniapp开发微信小程序，配合UView组件

Uview中有tabBar组件：官网地址

使用UView配合Vuex自定义tabBar成功解决问题，附上教程：

0、仅需配置tabBar中list属性中各页面的路径:

"tabBar": {
		
		"list": [{
			"pagePath": "pages/A/A"
		}, {
			"pagePath": "pages/B/B"
		}, {
			"pagePath": "pages/C/C"
		}]
	},

1、创建自定义的tabBar文件： tabBar.js，我放在了utils路径下，各位请随意

const testABar= [
	// 首页
	{
		// 未点击图标
		iconPath: "/static/img/tab/home.png",
		// 点击后图标
		selectedIconPath: "/static/img/tab/home-active.png",
		// 显示文字
		text: '人员列表',
		// 是否显示红点
		isDot: true,
		// 是否使用自定义图标
		customIcon: true,
		// 页面路径
		pagePath: "/pages/A/A"
	}, {
		iconPath: "/static/img/tab/user.png",
		selectedIconPath: "/static/img/tab/user-active.png",
		text: '我的',
		isDot: true,
		customIcon: true,
		pagePath: "/pages/B/B"
	}
	// 省略
]

const testBBar= [
	// 首页
	{
		// 未点击图标
		iconPath: "/static/img/tab/home.png",
		// 点击后图标
		selectedIconPath: "/static/img/tab/home-active.png",
		text: '车辆列表',
		isDot: true,
		customIcon: true,
		pagePath: "/pages/C/C"
	}, {
		iconPath: "/static/img/tab/user.png",
		selectedIconPath: "/static/img/tab/user-active.png",
		text: '我的',
		isDot: true,
		customIcon: true,
		pagePath: "/pages/D/D"
	}
	// 省略
]

export default {
	testABar,
	testBBar
}

2、配置Vuex

文件目录：

tabBer.js 文件内容：

import tabBer from '@/utils/tabBer.js'

// tabBar文件为我们创建的tabBer对象数组

// 判断用户tabBer类别, 例如

// 逻辑判断处理
let type = uni.getStorageSync('userInfo').id < 2 ? 'testABar' : 'testBBar'

// midBtn 为设置tabBer中间的凸起，false为不凸起
const state = {
	list: tabBer[type],
	midBtn: type === 'staffBar' ? false : false,
}

const mutations = {

}


export default {
	namespaced: true,
	state,
	mutations
}

3、getters.js 文件内容：

const getters = {
	tabBerList: state => state.tabBer.list,
	midBtn: state => state.tabBer.midBtn
}

export default getters	

4、index.js 文件内容

import Vue from 'vue'
import Vuex from 'vuex'
import tabBer from './modules/tabBer'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
	modules: {
		tabBer
	},
	getters
})

export default store

5、在创建上面的所有文件之后，我们就可以通过vueX得到两份不同的tabBar对象数组了，接下来我们在每个tabBar对应页面引入，如下

<template>
	<view class="content">
		<view class="main-box">
			测试A
		</view>
		<u-tabbar
			:list="tabBerList"
			:mid-button="midBtn"
			active-color="#5098FF"
			inactive-color="#909399"
			border-top="false"
			bg-color = "#F8F8F8"
		></u-tabbar>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
			
			}
		},
		computed: {
			...mapGetters([
				'tabBerList',
				'midBtn'
			])
		}
	}
</script>

<style scoped lang="scss">

</style>

然后，大功告成

最后，首先感谢大佬指点迷津，，附上链接：https://blog.csdn.net/fuyuumiai/article/details/109746357