接受挑战设计师终于对小程序的tabbar忍无可忍了，高度、字体...， 他找到了小李：“小李，我很担心啊，它影响了我们小程序的和谐，美感。它放在底部与我们格格不入，样式、字体、高度...。它割裂了我们与用户的交互，我们的弹层再高也会被它掩盖。”。 画风一转，设计师歪嘴一笑：“能不能把它做掉？”， [图片] 小李斜躺在公司配备的人体工学椅上，手拿MI 10 Pro，轻声道：“我可以试试，不过你知道的，得加钱！”，设计师满意的退下，他知道就没小李答应过没办成的事儿。 小李表面平淡，内心却是万匹草泥马经过，作为练习时长两年半的前端练习生，他熟读小程序文档，不就是为了今天吗，寒窗苦读一夜文，不为一朝有用时？微信tabbar宁有种乎？ 自定义tabbar根据微信自定义 tabBar的文档，简单的三步走加上一点点细节就能完成 配置信息在 [代码]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": {} } ​ 添加 tabBar 代码文件在代码根目录下添加入口文件:custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss 编写 tabBar 代码用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 [代码]getTabBar[代码] 接口，可获取当前页面下的自定义 tabBar 组件实例。转换为Taro3代码[图片] 大概长这样！ 它掉了很快项目就上了线，事情告一段落，小李又一次维护了小程序的美与和谐，再一次坚持了“这个可以做”的原则。直到产品的iOS 14发现自定义tababr会消失之后，所以爱会消失吗，一切都变了样。 小李开始慌了，找着一个又一个说辞，逛开发社区，看相关问题。总算是看到了官方回复： 自定义 tabBar 在切换 tab 时会使 tabBar 消失 setState，永远滴神！ 小李很快按照官方回复：在显示 tab 页后，利用一次 setData 调用触发页面重渲染，让 tabBar 重新显示。 另辟蹊径小李觉得这件事情非常hack，无端调用setData。他仿佛掉入了锚定效应的坑，按照微信自定义tabbar文档来自定义tabbar，按照微信说的setState来解决tabbar消失。 按照微信的文档： [代码]custom-tab-bar[代码]目录下的组件将被放到tab页面。 等等，放到tab页面？ 为啥我不可以自己放？ [图片] 思想挣开了锚，此刻小李可以自由的在大海遨游。 将自定义tabbar 当作普通组件主动挂载到几个tab页面，将空组件放到[代码]custom-tab-bar[代码]目录下，no setState，no hack！