例如下图的需求https://juejin.cn/post/7365533404790341651

在开发微信小程序通常会使用uniapp自带的tabBar实现底部图标和导航但现实有少量应用使用uniapp自带的tabBar无法满足需求这时需要自定义底部tabBar功能。

例如下图的需求在中间添加一个加号例如根据不同登录的角色显示不同的tabBar按钮等这些功能在无法通过

常规tabBar

uniapp.dcloud.net.cn/collocation…

下面将下图为示例写部分代码案例

并在List定义好每个页面与页面展示图标以及不同选中时图标的效果就可以实现下面页面展示的样式

案例代码

注意导航页的图标和页面都必须在根路径下面因此不能使用网络地址或分包下的图片和页面。

tabBar:

pages/tabbar/index/index,iconPath:

static/images/common/shouye.png,selectedIconPath:

static/images/common/shouye-xz.png,text:

首页},{pagePath:

static/images/common/task.png,selectedIconPath:

static/images/common/task_d.png,text:

达人任务},{pagePath:

pages/tabbar/facilitator/facilitator,iconPath:

static/images/common/facilitator.png,selectedIconPath:

static/images/common/facilitator_d.png,text:

服务商},{pagePath:

pages/aiTools/aiTools,iconPath:

static/images/common/aitools.png,selectedIconPath:

static/images/common/aitools_d.png,text:

创作助手},{pagePath:

pages/tabbar/info/info,iconPath:

static/images/common/info.png,selectedIconPath:

static/images/common/info_d.png,text:

梳理业务

去除pages.json写上tabBar注释相关代码;通过uni.hideTabBar();隐藏uniapp自带的tabBar;自定义tabBar组件实现页面相关逻辑;在相关页面引入该组件;根据在页面的onShow方法当页面显示通过$ref调用相关逻辑判断需要显示的底部tabBar按钮和样式。

去除pages.json写上tabBar注释相关代码图上写了一个list.pagePath

2.封装tabBar.vue组件

ps我在components\tabbar\tabbar.vue路径下封装tabBar.vue组件其他的小伙伴可以根据自己的页面需求写在对应位置例如想实现首页点击进入不同的分包和页面展示不同的tabBar那么可以根据自己的需求进行调整。

templateview

:srcitem.selectedIconPathv-ifcurrent

index/imageimage

:srcitem.selectedIconPathv-ifcurrent

index/imageimage

}}/view/view/view/view/template/view/view

/templatescript

../../static/images/common/addTask.png

export

下面list则是你页面上具体展示的底部按钮根据你的需求和页面进行调整list:

[{pagePath:

pages/tabbar/index/index,iconPath:

../../static/images/common/shouye.png,selectedIconPath:

../../static/images/common/shouye-xz.png,text:

首页},{pagePath:

../../static/images/common/task.png,selectedIconPath:

../../static/images/common/task_d.png,text:

达人任务},{pagePath:

pages/tabbar/facilitator/facilitator,iconPath:

../../static/images/common/facilitator.png,selectedIconPath:

../../static/images/common/facilitator_d.png,text:

服务商},{pagePath:

pages/aiTools/aiTools,iconPath:

../../static/images/common/aitools.png,selectedIconPath:

../../static/images/common/aitools_d.png,text:

创作助手},{pagePath:

pages/tabbar/info/info,iconPath:

../../static/images/common/info.png,selectedIconPath:

../../static/images/common/info_d.png,text:

{//隐藏tabbaruni.hideTabBar();},mounted()

{},methods:

this.list[e].pagePath,})}}}/scriptstyle

.tabbar

/template/view//current则表示选中的状态例如当前是首页则current为0,如果是第三页则current2tabbar

current0

}在tabBar.vue组件写上相关页面判断例如不同的角色则显示不同的按钮或不同样式。

tabBar.vue组件中的methods添加一个init函数

init()

userinfo?.identity;}//...其他调接口等业务处理}在第三步的index.vue页面中引入的tabbar组件定义了一个refmytabbar可以通过this.$refs.tabBar.init();的方式来调用tabBar.vue组件中的methods的init函数。

例如在index.vue组件下的onShow方法下当页面显示时候执行tabBar.vue组件中的methods的init函数

async