uniapp根据登录用户的角色动态的改变tabBar的数量和内容

深度学习论文翻译解析(十七):MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications

此文章借鉴于https://blog.csdn.net/fuyuumiai/article/details/109746357

 

介绍:

现在我们要满足的项目需求是根据登录用户角色的不同,tabBar的数量和内容显示不同,如下图

 

用户角色为管理员时:

 

用户角色为普通用户时:

 

 

登录用户的角色不同,因为权限不同所以tabBar的内容和数量也不同,而uniapp中tabBar本身的配置   uni.setTabBarItem(OBJECT)   只能够满足动态设置 tabBar 某一项的内容,没办法实现上图中的需求

这个时候我们就可以使用UI框架Uview来实现需求

 

一、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的安装配置结束

 

二、配置tabBar

1、创建tabBar页面

 

基于循环队列的BFS的原理及实现

2、在page.json配置tabBar页面路径

  在page.json中配置tabBar页面路径,只需要配置各个页面的路径就可以,不用配置其他项

 

 

3、创建自定义tabBar文件

  在项目根目录下创建untils文件夹,文件夹内创建tabBer.js文件

 

这个js文件是我们自定义的tabBar属性文件,用来覆盖原来的配置

 

  根据uniapp官网中tabBar的属性配置即可,每个数组代表一种角色要显示的tabBar列表,比如我有管理员和普通用户两种角色,就配置两个数组,每个数组里面配置各自tabBar的页面属性,就算两个角色有相同的页面,也要在各自的数组中配置,

  数组中的顺序就是tabBar显示的顺序,对顺序有要求的请注意此项

 

三、配置vuex

  uniapp中已经集成了vuex,我们直接用就可以,

  我个人对vuex并不太了解,在项目中只是能单纯的运用,getters.js 和index.js完全是套我个人理解的模板来做

1、根目录下创建store文件夹及其他文件

 

 

2、配置tabber.js文件

  在tabBer.js文件中对登录用户进行角色判断

  midBtn是为了判断uview中tabBar组件的加号按钮是否显示,当你的项目需求为确认显示或确认不显示时,直接在uview/components/u-tabbar中找到该项修改属性为true或者false即可,不用再在tabBer.js文件中判断,我的项目不需要,所以我会把这一项直接删掉

 

 

 3、getters

当tabBer.js文件中的midBtn去掉不写时,本文件中的对应项也直接去掉

 

 

4、index.js

 

 

5、mian.js引入store

在main.js中引入store文件

 

 

 

 

 

 四、引入组件

  在每个tabBar的页面引入uView中的tabBar组件,父传子传值,一些固定的值可以不传值直接在组件中修改

 

 

这是tabbar组件,uview-ui/components/u-tabbar.vue,props中的值如果不需要动态变化可以直接设定初始值,父组件不再传值,

如下图,直接设置组件中间的加号按钮为false,前面一系列关于midBtn的代码都可以删除

 

 

有意见或者问题可以提,请不要批评我,因为我不接受!!!

结束!!!

撒花!!!

 

电商必知,淘宝商品和类目体系是如何设计的

相关推荐

发表评论

路人甲

网友评论(0)