此文章借鉴于https://blog.csdn.net/fuyuumiai/article/details/109746357，在此基础上修改小部分内容，适用于我这种uniapp小白
介绍：
现在我们要满足的项目需求是根据登录用户角色的不同，tabBar的数量和内容显示不同，如下图
用户角色为管理员时：
用户角色为普通用户时：
登录用户的角色不同，因为权限不同所以tabBar的内容和数量也不同，而uniapp中tabBar本身的配置 uni.setTabBarItem(OBJECT) 只能够满足动态设置 tabBar 某一项的内容，没办法实现上图中的需求
这个时候我们就可以使用UI框架Uview来实现需求
大家可以直接去官网根据官方指导下载配置 uView
官方推荐两种安装方式，一种是下载安装，一种是npm安装，我个人选择了第一种，现在讲下我个人的配置过程（可以直接看官网的讲的很详细）
打开uView的下载地址 https://ext.dcloud.net.cn/plugin?id=1593 选择右侧的用HbuilderX导入插件
导入时会新建一个文件夹用来存放uView文件确认好路径后直接点击创建就可以
下载成功后，找到新建的文件夹，下载好的uView文件就在里面，把该文件夹内的uview-ui文件复制到uniapp项目的根目录下
配置项官方写的很详细， 配置
1、确认项目中已经安装好scss插件，在配置uview的css时需要用到
2、在main.js中引入uview的js库
import uView from 'uview-ui' Vue.use(uView)
3、在项目根目录的uni.scss文件中引入 uView的全局SCSS主题文件，在uni.scss文件的最开始引入就可以，方便查找
4、在app.vue文件的style样式中引入uView基础样式，style中需要写明 lang = scss ，我之前就已经配置好了scss插件，所以直接用就可以，没有安装scss插件的自行安装
5、配置easycom组件模式
在根目录的page.json文件中配置，意思是 // 匹配uview-ui文件下components目录内的vue文件，具体解释可以查看官网 easycom
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
至此，uview的安装配置结束
在page.json中配置tabBar页面路径，只需要配置各个页面的路径就可以，不用配置其他项
在项目根目录下创建untils文件夹，文件夹内创建tabBer.js文件
这个js文件是我们自定义的tabBar属性文件，用来覆盖原来的配置
根据uniapp官网中tabBar的属性配置即可，每个数组代表一种角色要显示的tabBar列表，比如我有管理员和普通用户两种角色，就配置两个数组，每个数组里面配置各自tabBar的页面属性，就算两个角色有相同的页面，也要在各自的数组中配置，
数组中的顺序就是tabBar显示的顺序，对顺序有要求的请注意此项
uniapp中已经集成了vuex，我们直接用就可以，
我个人对vuex并不太了解，在项目中只是能单纯的运用，getters.js 和index.js完全是套我个人理解的模板来做
在tabBer.js文件中对登录用户进行角色判断
midBtn是为了判断uview中tabBar组件的加号按钮是否显示，当你的项目需求为确认显示或确认不显示时，直接在uview/components/u-tabbar中找到该项修改属性为true或者false即可，不用再在tabBer.js文件中判断，我的项目不需要，所以我会把这一项直接删掉
当tabBer.js文件中的midBtn去掉不写时，本文件中的对应项也直接去掉
在main.js中引入store文件
在每个tabBar的页面引入uView中的tabBar组件，父传子传值，一些固定的值可以不传值直接在组件中修改
这是tabbar组件，uview-ui/components/u-tabbar.vue，props中的值如果不需要动态变化可以直接设定初始值，父组件不再传值，
如下图，直接设置组件中间的加号按钮为false，前面一系列关于midBtn的代码都可以删除
结束！！！
撒花！！！
