微信小程序开发动态设置tabbar

需求描述

不同身份的用户登录后，动态更改底部导航栏，也就是 tabbar。
注意 不是简单改变 tabbar item 的样式，而是需要更改 item 文字，icon， 关键是跳转链接 pagePath。

技术框架

基于uni-app开发，使用了 colorui、uview等第三方框架。

但当前阶段主要是以微信小程序的作为客户端展示。

解决思路

下面就我实际开发中实际实践过的解决思路做了个总结：

• 基于 view 自定义 tabbar

  • 基于 colorui 实现思路，view 布局一个完全自定义的 tabbar，然后基于一个页面，把 tab 页面以组件的形式，通过 v-if 来切换实现切换 tab 的效果。
    • 优点：高度灵活，可任意自定义样式。
    • 缺点：
      • 性能问题：当页面比较简单的（如博客或企业官网），还比较流畅；当每个 tab 页面稍微复杂点，加载慢卡顿问题明显，用户体验特别差，当然和设备硬件能力也有关系（这是我放弃该方案的直接原因）。
      • 路由问题：同样对也小型项目，页面功能结构简单，也只是基本可用。对于页面复杂，每次路由到某个tab 页面，再加上组件的生命周期限制，触发更新数据是个棘手的问题。
  • 基于 uview 实现思路，为了提高性能问题，uview 官方还是基于 原生 tabbar 出来一个解决方案，但是 隐藏原生 tabbar 后，微信小程序启动的一瞬间， 原生 tabbar 还是有闪现的一瞬，这个体验极差，但是这个问题，是微信小程序官方都未解决的问题。所以该方式我已放弃了。

• 原生 tabbar

  • 优点
    • 点击切换，页面加载性能出色。
    • 配置简单，只需要 page.json 中配置 tabbar 项即可，样式简单设置，其它都依赖官方能力。
  • 缺点
    • 样式自定义能力极差，这个 UI设计 能力强一些我都勉强接受了。
    • 无法动态设置 tab item 的 pagePath，直接无法满足需求，这是我放弃该方案的直接原因。（注意 uni-app 的 api 虽然提供了该参数，但并不支持微信小程序。）

• 微信官方的 自定义 tabbar

  • 目前还未实践，主要是平台扩展性弱，官方的 demo 很简单，已经出现了切换 tabbar 时重新加载渲染 tabbar 的不好体验。然而可自定义动态配置优点，带来的工作量稍微有点大，暂时放弃。

最终方案

使用原生的 tabbar，通过官方提供的 api 设置文字和icon，以及红点角标数字等，解决不能动态设置 pagePath 的替代思路是 在 tab 页面内做 v-if 判断，根据角色不同，来显示不同内容，体验尚可，而且将来支持动态支持 pagePath 了，也容易更改，不会涉及太多代码修改。

这种设计思路，目前来讲，无论是交互体验还是页面加载性能，都是比较适合我们目前的项目的。也可能对您的项目不合适，所以仅供参考。

如果您有更好的解决思路，期待您的分享~~

参考资料

https://51blog.xyz/article/23.html