uniapp 动态tabBar（全过程包含vuex 组件 配置等）

   （装船权限）

 

 （卸船权限）

1.首先我们需要在pages.json配置tabbar  和pages （配置所有tabbar路径）

"pages": [ //pages数组中第一项表示应用启动页,
		{
			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
			"style": {
				"navigationBarTitleText": "装船作业计划",

				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
			"style": {
				"navigationBarTitleText": "装船指令",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
			"style": {
				"navigationBarTitleText": "历史",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
			"style": {
				"navigationBarTitleText": "卸船作业计划",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
			"style": {
				"navigationBarTitleText": "卸船指令",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
			"style": {
				"navigationBarTitleText": "历史",
				"app-plus": {
					"titleNView": false,
					"bounce": "none"
				}
			}
		}, 

	],	
"tabBar": {
		"color": "#7a7e83",
		"selectedColor": "#0faeff",
		"backgroundColor": "#ffffff",
        // "custom": true,custom(自定义)，不开启的话，在页面是有占位的，就需要在页面进行隐藏
		"list": [{
				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan"

			}, {
				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand"

			},
			{
				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory"

			},
			{
				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan"

			}, {
				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand"

			},
			{
				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory"

			}
		]
	},

2.配置动态tabBar.js

如图↓

 代码↓

// 装船权限
const loadVessel = [{
		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
		"text": "装船作业计划",
		"iconPath": require("@/static/img/common/装船作业计划.png"),
		"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
	}, {
		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
		"text": "装船指令",
		"iconPath": require("@/static/img/common/装船指令.png"),
		"selectedIconPath": require("@/static/img/common/装船指令1.png")
	},
	{
		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
		"text": "历史",
		"iconPath": require("@/static/img/common/历史.png"),
		"selectedIconPath": require("@/static/img/common/历史1.png")
	}
]

//卸船权限
const unloadVessel = [{
		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
		"text": "卸船作业计划",
		"iconPath": require("@/static/img/common/装船作业计划.png"),
		"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
	}, {
		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
		"text": "卸船指令",
		"iconPath": require("@/static/img/common/装船指令.png"),
		"selectedIconPath": require("@/static/img/common/装船指令1.png")
	},
	{
		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
		"text": "历史",
		"iconPath": require("@/static/img/common/历史.png"),
		"selectedIconPath": require("@/static/img/common/历史1.png")
	}
]

export default {
	loadVessel,//装船权限名  最后要存入 isMemberType里
	unloadVessel//卸船权限名 最后要存入 isMemberType里
}

3.使用vuex对tabBar列表数据进行一个存储赋值

index.js↓

import Vue from 'vue'
import Vuex from 'vuex'
import tabBar from './modules/tabBar'
Vue.use(Vuex)

const store = new Vuex.Store({
	modules:{tabBar},
	state: {
	
	},
	getters: {
		tabBarList: state => state.tabBar.tabBarList,
		isMemberType: state => state.tabBar.isMemberType,
	},
	mutations: {
		
	}
})

export default store

tabBar.js↓

import tarBarUserType from '@/utils/tabBar.js';

const tabBar = {
	state: {
		// 判断当前权限
		isMemberType: '',
		// tabbar列表数据
		tabBarList: []

	},
	mutations: {
		setType(state, isMemberType) {
			state.isMemberType = isMemberType;
			state.tabBarList = tarBarUserType[isMemberType];//根据权限取出对应的tabBar
			console.log(state.tabBarList )
		}
	}
}

export default tabBar;

创建一个tabBar组件↓

 代码↓

5.在存在tabbar的页面中都需要引入组件，并传相关数据（routePath传入当前页面的tabbar路径）

6.在需要的地方配置权限：↓

this.$store.commit('setType', tabbar路径);
                uni.switchTab({
                    url:tabbar路径
                })

7.在app.vue 里面隐藏tabBar

		onShow() {
			uni.hideTabBar({});
		},

本文参照，重新丰满过程↓

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)_uniapp动态设置tabbar_别改我bug的博客-CSDN博客