需求描述
不同身份的用户登录后,动态更改底部导航栏,也就是 tabbar。
注意 不是简单改变 tabbar item 的样式,而是需要更改 item 文字,icon, 关键是跳转链接 pagePath。
技术框架
基于uni-app开发,使用了 colorui、uview等第三方框架。
但当前阶段主要是以微信小程序的作为客户端展示。
解决思路
下面就我实际开发中实际实践过的解决思路做了个总结:
-
基于 view 自定义 tabbar
- 基于 colorui 实现思路,view 布局一个完全自定义的 tabbar,然后基于一个页面,把 tab 页面以组件的形式,通过 v-if 来切换实现切换 tab 的效果。
- 优点:高度灵活,可任意自定义样式。
- 缺点:
- 性能问题:当页面比较简单的(如博客或企业官网),还比较流畅;当每个 tab 页面稍微复杂点,加载慢卡顿问题明显,用户体验特别差,当然和设备硬件能力也有关系(
这是我放弃该方案的直接原因)。 - 路由问题:同样对也小型项目,页面功能结构简单,也只是基本可用。对于页面复杂,每次路由到某个tab 页面,再加上组件的生命周期限制,触发更新数据是个棘手的问题。
- 性能问题:当页面比较简单的(如博客或企业官网),还比较流畅;当每个 tab 页面稍微复杂点,加载慢卡顿问题明显,用户体验特别差,当然和设备硬件能力也有关系(
- 基于 uview 实现思路,为了提高性能问题,uview 官方还是基于 原生 tabbar 出来一个解决方案,但是 隐藏原生 tabbar 后,微信小程序启动的一瞬间, 原生 tabbar 还是有闪现的一瞬,这个体验极差,但是这个问题,是微信小程序官方都未解决的问题。
所以该方式我已放弃了。
- 基于 colorui 实现思路,view 布局一个完全自定义的 tabbar,然后基于一个页面,把 tab 页面以组件的形式,通过 v-if 来切换实现切换 tab 的效果。
-
原生 tabbar
- 优点
- 点击切换,页面加载性能出色。
- 配置简单,只需要 page.json 中配置 tabbar 项即可,样式简单设置,其它都依赖官方能力。
- 缺点
- 样式自定义能力极差,这个 UI设计 能力强一些我都勉强接受了。
- 无法动态设置 tab item 的 pagePath,直接无法满足需求,
这是我放弃该方案的直接原因。(注意 uni-app 的 api 虽然提供了该参数,但并不支持微信小程序。)
- 优点
-
微信官方的 自定义 tabbar
- 目前还未实践,主要是平台扩展性弱,官方的 demo 很简单,已经出现了切换 tabbar 时重新加载渲染 tabbar 的不好体验。然而可自定义动态配置优点,带来的工作量稍微有点大,暂时放弃。
最终方案
使用原生的 tabbar,通过官方提供的 api 设置文字和icon,以及红点角标数字等,解决不能动态设置 pagePath 的替代思路是 在 tab 页面内做 v-if 判断,根据角色不同,来显示不同内容,体验尚可,而且将来支持动态支持 pagePath 了,也容易更改,不会涉及太多代码修改。
这种设计思路,目前来讲,无论是交互体验还是页面加载性能,都是比较适合我们目前的项目的。也可能对您的项目不合适,所以仅供参考。
如果您有更好的解决思路,期待您的分享~~
参考资料