文章目录

一、基础配置1. 配置tabbar2. 创建tabbar组件3. 动态跳转逻辑

二、问题拓展2.1. 问题一2.2. 原因解析2.3.解决方案

最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件

一、基础配置

1. 配置tabbar

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/my/my",

"style" :

{

"navigationBarTitleText": "",

"enablePullDownRefresh": false

}

}

,{

"path" : "pages/warn/warn",

"style" :

{

"navigationBarTitleText": "",

"enablePullDownRefresh": false

}

}

],

"globalStyle": {

"navigationBarTextStyle": "black",

"navigationBarTitleText": "uni-app",

"navigationBarBackgroundColor": "#F8F8F8",

"backgroundColor": "#F8F8F8"

},

"uniIdRouter": {},

"tabBar": {

"color": "#999",

"selectedColor": "#0aa671",

"borderStyle": "white",

"list": [

{

"pagePath": "pages/index/index"

},

{

"pagePath": "pages/warn/warn"

},

{

"pagePath": "pages/my/my"

}

]

}

}

2. 创建tabbar组件

第一步：在项目中创建components文件夹，并在文件夹下创建tabbar组件

注意： 跳转路径：pagePath以/开头

说明：tab_img可以修改图标大小，tab_text可以修改文字大小

第二步： 在main.js文件中将自定义的tabBar定义为全局组件

//⭐⭐ main.js 文件

import tabBar from "@/components/tabbar/tabbar.vue"

Vue.component('tabBar',tabBar)

第三步：在需要使用的页面引入tabbar组件

//如 index页面

//如 warn 页面

//如 my 页面

第四步：隐藏pages.json里配置的导航栏，使用封装的tabbar组件，在需要引入tabbar组件的页面进行配置

//如 warn 页面 index 和 my 页面也是同样的设置

3. 动态跳转逻辑

登录页面根据不同身份进行tabbar切换逻辑

//登录 login 页面

二、问题拓展

2.1. 问题一

当是角色1时，点击tabbar我的页面文字和图标造成颜色闪烁

2.2. 原因解析

角色1是有两个tabbar ，“我的”页面对应的index值是1，而selectedIndex 被设置为超出角色1 tab 的索引范围。在这种情况下，currentIndex 的默认值为0，而将 selectedIndex 设置为2 会导致 currentIndex 与实际选中的 tab 不一致，进而导致文字和图标显示颜色发生闪烁。

2.3.解决方案

在传递 selectedIndex 给 组件时进行判断，并确保它不会超出角色1 tab 的索引范围

重新修改my页面

// my 页面

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。