小程序这个可以做之自定义tabbar

接受挑战

设计师终于对小程序的tabbar忍无可忍了，高度、字体...，

他找到了小李：“小李，我很担心啊，它影响了我们小程序的和谐，美感。它放在底部与我们格格不入，样式、字体、高度...。它割裂了我们与用户的交互，我们的弹层再高也会被它掩盖。”。

画风一转，设计师歪嘴一笑：“能不能把它做掉？”，

小李斜躺在公司配备的人体工学椅上，手拿MI 10 Pro，轻声道：“我可以试试，不过你知道的，得加钱！”，设计师满意的退下，他知道就没小李答应过没办成的事儿。

小李表面平淡，内心却是万匹草泥马经过，作为练习时长两年半的前端练习生，他熟读小程序文档，不就是为了今天吗，寒窗苦读一夜文，不为一朝有用时？微信tabbar宁有种乎？

自定义tabbar

根据微信自定义 tabBar的文档，简单的三步走加上一点点细节就能完成

1. 配置信息

   • 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

   • 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

     示例：

     {
       "tabBar": {
         "custom": true,
         "color": "#000000",
         "selectedColor": "#000000",
         "backgroundColor": "#000000",
         "list": [{
           "pagePath": "page/component/index",
           "text": "组件"
         }, {
           "pagePath": "page/API/index",
           "text": "接口"
         }]
       },
       "usingComponents": {}
     }
     
     

2. 添加 tabBar 代码文件

   在代码根目录下添加入口文件:

   ```bash
   custom-tab-bar/index.js
   custom-tab-bar/index.json
   custom-tab-bar/index.wxml
   custom-tab-bar/index.wxss
   ```
   

3. 编写 tabBar 代码

   用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

4. 转换为Taro3代码

大概长这样！

它掉了

很快项目就上了线，事情告一段落，小李又一次维护了小程序的美与和谐，再一次坚持了“这个可以做”的原则。直到产品的iOS 14发现自定义tababr会消失之后，所以爱会消失吗，一切都变了样。

小李开始慌了，找着一个又一个说辞，逛开发社区，看相关问题。总算是看到了官方回复：

自定义 tabBar 在切换 tab 时会使 tabBar 消失

小李很快按照官方回复：在显示 tab 页后，利用一次 setData 调用触发页面重渲染，让 tabBar 重新显示。setState，永远滴神！

另辟蹊径

小李觉得这件事情非常hack，无端调用setData。他仿佛掉入了锚定效应的坑，按照微信自定义tabbar文档来自定义tabbar，按照微信说的setState来解决tabbar消失。

按照微信的文档：

custom-tab-bar目录下的组件将被放到tab页面。

等等，放到tab页面？

为啥我不可以自己放？

思想挣开了锚，此刻小李可以自由的在大海遨游。 将自定义tabbar 当作普通组件主动挂载到几个tab页面，将空组件放到custom-tab-bar目录下，no setState，no hack！