可能大家在开发一些平台类的微信小程序客户端时，会遇到底部 tabbar 需要根据不同的身份或角色来动态显示不同的菜单项，从而进入不同的功能页面，但是又受限于 微信小程序官方 API 的开放能力，所以解决起来还是相对麻烦，本文就将我的实践经验做个分享，供大家参考！
微信小程序开发动态设置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 了，也容易更改，不会涉及太多代码修改。
这种设计思路，目前来讲，无论是交互体验还是页面加载性能，都是比较适合我们目前的项目的。也可能对您的项目不合适，所以仅供参考。
如果您有更好的解决思路，期待您的分享~~
WEB程序开发笔记
强烈推荐的PHP全栈开发后台管理系统
