uni-app使用封装导航栏

由于uni-app原生导航栏存在很多功能不可以配置，特别是我需要用到根据登录的用户权限，来打开不同用户界面，这里不同就指的是导航栏的部分权限。

修改pages.json文件，隐藏原生导航栏

这里我们只需要保留原来的list里的路径即可

封装tabBer.js

const tabbarAD= [
	// 首页
	{
		// 未点击图标
		iconPath: "/static/report1.png",
		// 点击后图标
		selectedIconPath: "/static/report2.png",
		// 显示文字
		text: '',
		// 是否显示红点
		isDot: true,
		// 是否使用自定义图标
		customIcon: true,
		// 页面路径
		pagePath: "/pages/index/report"
	}, {
		iconPath: "/static/my1.png",
		selectedIconPath: "/static/my2.png",
		text: '个人中心',
		isDot: true,
		customIcon: true,
		pagePath: "/pages/personal/my"
	}
]
const tabbarBD=[]
const tabbarCD=[]
const tabbarABCD=[]
export default {
	tabbarAD,
	tabbarBD,
	tabbarCD,
	tabbarABCD
}

这里可以封装多个需要的类型，例如底部导航栏有4个，我这里AD就代表第一个和第四个,前端权限调用的时候，就可以区分开来。

用户id传值调用相应的权限

用户登录成功后先执行传值和匹配后，再进入主页面

this.$store.commit('setTabbarList', _res[0].id)

此时

export default {
	state: {
		tabbarList: []
	},
mutations: {
		setTabbarList: (state, userId) => {
			const _obj = {
				0: 'tabbarABCD',
				1: 'tabbarAD',
				2: 'tabbarBD',
				3: 'tabbarCD',
			}
			const type = _obj[+userId]
			state.tabbarList = tabBer[type]
		}
	},
}

记得把封住的组件main.js 里引用一下，成全局组件。