UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面)

最近工作在用UniApp做项目，上个星期左右这个项目APP端已经做的差不多了，后面接到任务要把这个项目发布小程序版本，一些样式兼容问题处理完后卡在了动态设置TabBer这上面，在app端使用UniApp的api(uni.setTabBarItem(OBJECT)即可完成功能需求)，但是这个api在微信小程序端仅支持修改文字图标不支持修改pagePath，然后就开始找各种文章，文档，询问同行朋友等，最终得出大都以下两种解决方案。

方案一：使用微信小程序开发文档中推荐的自定义TabBer

1. 在 app.json 中的 tabBar 项指定 custom 字段，开启使用自定义TabBer。
2. 在根目录新建“custom-tab-bar”文件夹，在该文件夹下新建index.js，index.json，index.wxml，index.wxss编写
   tabBar 代码
   缺点：需要跳转的TabBer页面还是需要在配置文件中tabBar-list下配置页面路径等信息，所以TabBer页面多于5个该方案还是不行。

方案二：在components把TabBer封装组件，在跳转的tabber页面显示（使用）

缺点：跳转时页面闪动问题(我也没试，反正用这方案的都在吐槽这个问题，我想了一下应该是说在从一个tabber跳到另一个tabber的这段时间，自定义的组件也随着页面的加载销毁这个显示隐藏的视觉问题，原生的就不会闪跳转页面也一直在底部)，再有就是性能问题UniApp官方也建议除H5在APP端和小程序端非必要不自定义TabBer,还有就是我app端都查不多了不想在花时间去封装组件写跳转逻辑还各个tabber页面去处理，关键效果还不好(主要还是懒)。

不知何时不知何地，抓破头皮，在工位上，n次被同事这问题那问题打断。n+1²次在嘈杂的办公环境中被打断思路。人都要傻了，就差精神分裂了，最终皇天不负臭男人， 只要思想不滑坡，困难总比办法多。 一点一点的实现了效果.

效果图:

微信模拟器打开的，代码没优化，也没压缩，电脑性能也是卡卡的，所以看起来有点卡渲染显示有点慢，正式发布后会快很多！（效果图后面前两个tabber出现加载效果的时候是我点了编译！）

查看方案实现步骤