目录
一、背景
源码地址：包含vue2和vue3版本：cheinlu/tabBar_demo_vue
二、效果展示
三、前置工作
四、创建tabbar组件
五、登录页面根据不同身份进行tabbar切换逻辑
六、问题拓展
一、背景
最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件
备注：本次示例为vue2版本，vue3版本源码可查看以下地址
✍完整代码地址（包含vue2和vue3版本）： cheinlu/tabBar_demo_vue
二、效果展示
2.1、角色1：admin账号登录效果
用户名：admin 密码：123456
2.2、角色2：tom账户登录效果
用户名：tom 密码：123456
三、前置工作
3.1、将登录页面作为用户进入小程序展示的第一个页面，pages.json文件中的pages数组第一个设为login页面
3.2、pages.json配置tabbar的基本路径（只需路径即可）
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/warn/warn",
"style" :
{
"navigationBarTitleText": "告警",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/warn/warn"
},
{
"pagePath": "pages/my/my"
}
]
}
}
四、创建tabbar组件
4.1、第一步：在项目中创建components文件夹，并在文件夹下创建tabbar组件
tabbar组件具体代码如下：
注意： 跳转路径：pagePath以/开头
说明：tab_img可以修改图标大小，tab_text可以修改文字大小
4.2、第二步： 在main.js文件中将自定义的tabBar定义为全局组件
//⭐⭐ main.js 文件
import tabBar from "@/components/tabbar/tabbar.vue"
Vue.component('tabBar',tabBar)
4.3、第三步：在需要使用的页面引入tabbar组件
//如 index页面
首页
//如 warn 页面
告警
//如 my 页面
我的
4.4、第四步：隐藏pages.json里配置的导航栏，使用封装的tabbar组件，在需要引入tabbar组件的页面进行配置
//如 warn 页面 index 和 my 页面也是同样的设置
五、登录页面根据不同身份进行tabbar切换逻辑
//登录 login 页面
六、问题拓展
6.1、问题：当是角色1时，点击tabbar我的页面文字和图标造成颜色闪烁
6.2、原因：角色1是有两个tabbar ，“我的”页面对应的index值是1，而selectedIndex 被设置为超出角色1 tab 的索引范围。在这种情况下，currentIndex 的默认值为0，而将 selectedIndex 设置为2 会导致 currentIndex 与实际选中的 tab 不一致，进而导致文字和图标显示颜色发生闪烁。
6.3、解决：在传递 selectedIndex 给
6.4、重新修改my页面
// my 页面
我的
PS：如果对你有帮助的话，请给个赞，有问题欢迎大家在评论区讨论。ღ( ´･ᴗ･` ) ღ( ´･ᴗ･` )
最后：
好文链接
您阅读本篇文章共花了：
发表评论