uniapp动态底部tabbar-金沙1005

1. 需求背景

公司要求开发一个小程序，要求二种不同权限的人群都可以使用，使用时根据不同的权限，获取不同的tabbar，以及展示对应不同的内容。

登录页面分为 用户登录 及 管理员登录

1.2 用户登录和管理员登录的 tabbar 根据账号角色进行对应展示

1.1 源码下载

2. 问题前提及思路

uniapp 本身的动态设置tabbar方法 ，但是使用这个方法刷新切换时会短暂白屏以及uni.settabbaritem只能满足动态设置tabbar一项的内容，无法实现多项的需求。所有综合考虑决定还是使用uview-ui的tabbar底部导航栏组件。

最终选择了uni-app的uview-ui（ui框架） vuex来完成这个功能。其中，vuex主要是用来存储当前的tabbar内容的。

3. 开始撸

3.1 设置 tabbar.js 配置不同角色不同的菜单

在utils文件夹下新建一个tabbar.js，来存储不同权限下的底部导航数据。我这里有两种不同的权限，第二种权限比第一种权限多了两项菜单。

// 普通用户tabbar
let tab1 = [
	{ 
   
		"pagepath": "/pages/loginlogrecord/index",
		"text": "登录记录",
		"iconpath": "/static/icon_bx.png",
		"selectediconpath": "/static/icon_bx_hover.png"
	},
	{ 
   
		"pagepath": "/pages/accessrecord/index",
		"text": "存取记录",
		"iconpath": "/static/icon_adress.png",
		"selectediconpath": "/static/icon_adress_hover.png"
	},
	{ 
   
		"pagepath": "/pages/person/index",
		"text": "我的",
		"iconpath": "/static/icon_user.png",
		"selectediconpath": "/static/icon_user_hover.png"
	}
]
// 管理员用户tabbar
let tab2 = [
	{ 
   
		"pagepath": "/pages/loginlogrecord/index",
		"text": "登录记录",
		"iconpath": "/static/icon_bx.png",
		"selectediconpath": "/static/icon_bx_hover.png"
	},
	{ 
   
		"pagepath": "/pages/accessrecord/index",
		"text": "存取记录",
		"iconpath": "/static/icon_adress.png",
		"selectediconpath": "/static/icon_adress_hover.png"
	},
	{ 
   
		"pagepath": "/pages/authorizationlist/index",
		"text": "授权名单",
		"iconpath": "/static/authorization.png",
		"selectediconpath": "/static/authorization_hover.png"
	},
	{ 
   
		"pagepath": "/pages/inventory/index",
		"text": "盘点",
		"iconpath": "/static/inventory.png",
		"selectediconpath": "/static/inventory_hover.png"
	},
	{ 
   
		"pagepath": "/pages/person/index",
		"text": "我的",
		"iconpath": "/static/icon_user.png",
		"selectediconpath": "/static/icon_user_hover.png"
	}
]
export default [
	tab1,
	tab2
]

3.2 设置 page.json

在page.json文件里，把tabbar里的几个页面去重放进去。只是单纯的写个路径，什么都不要添加。test，iconpath，selectediconpath 字段全部删掉这里不需要配置。

"tabbar": { 
   
	"color": "#333333",
	"selectedcolor": "#328cfa",
	"backgroundcolor": "#ffffff",
	"list": [
		{ 
   
			"pagepath": "pages/loginlogrecord/index"
		},
		{ 
   
			"pagepath": "pages/accessrecord/index"
		},
		{ 
   
			"pagepath": "pages/authorizationlist/index"
		},
		{ 
   
			"pagepath": "pages/inventory/index"
		},
		{ 
   
			"pagepath": "pages/person/index"
		}
	]
}

3.3 vue 配置

uniapp是可以直接使用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: { 
   
		wx_token: '',
		tabbarlist: [],
		roleid: 0, //0 普通员工，1管理员
	},
	mutations: { 
   
		// 设置wx_token
		setwxtoken(state, data) { 
   
			state.wx_token = data;
			uni.setstoragesync('wx_token',data)
		},
		// 设置用户角色id
		setroleid(state, data) { 
   
			state.roleid = data;
			uni.setstoragesync('roleid',data)
			state.tabbarlist = tabbar[data];
			uni.setstoragesync('tabbarlist',tabbar[data])
		},
	},
})
export default store

在入口文件 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({ 
   
    ...app,
	store
})
app.$mount()

3.4 tabbar组件代码

<template>
	<view>
		<u-tabbar :list="tabbarlist" :active-color="activecolor" :inactive-color="inactivecolor" :height="84" :border-top="bordertop">
		u-tabbar>
	view>
template>
<script> import store from '@/store' export default { 
      props:{ 
      tabbarlist:{ 
      type:array, default:uni.getstoragesync('tabbarlist') } }, data() { 
      return { 
      bordertop: true, inactivecolor: '#909399', activecolor: '#328cfa', } }, } script>

3.5 setrole方法

登录时，获取返回的权限，然后再调用setrole方法

<script> import { 
      mapmutations } from 'vuex'; export default { 
      data() { 
      return { 
      roleid:0, }; }, methods: { 
      methods: { 
      ...mapmutations(['setroleid']), }, //登录 login() { 
      this.setroleid(this.roleid)// 0或者1 uni.switchtab({ 
      url: '../index/index' //然后跳转到登录后的金沙1005首页 }) } } } script>