重要提示

小程序中的tabbar默认可以在app.json中配置，参见全局配置 | 微信开放文档，请优先考虑使用官方配置，在使用上更简洁优雅。同时小程序也提供了自定义tabbar的方法，参见自定义 tabBar | 微信开放文档，

三种实现思路

按简易程度排序。

1. 官方约定的自定义组件

已基本优化图标闪烁问题，官方正在修复中，见此

参照官方的教程步骤如下：

1. app.json中声明tabBar中的custom: true，隐藏默认的tabBar，并补充完整的tab页面路径。
2. 按照约定，在根目录创建custom-tab-bar/index.js等作为自定义展示的tabBar
3. 然后在app.json中添加usingComponents或在对应的tab页面（可以是组件或页面）中添加usingComponents项（仅需key即可），微信会自动把该组件注册到对应的tab页面中。
4. 观察官方示例可以发现：在custom-tab-bar/index中通过cover-view + cover-image + fixed+padding-bottom: env(safe-area-inset-bottom) 让对应的tab显示在页面的最下方，并处理了安全边距的问题，
5. 点击不同的菜单时，首先会在组件内部触发跳转路由操作，使用wx.switchTab, 因为对应路径已经在app.json中已声明为tab页面。
6. 官方示例在tab组件的onShow中更新selected状态（通过this.getTabBar()获取自定义tabBar实例），同时在该tabBar的点击回调中更新selected，会出现闪烁问题，'该tabBar的点击回调中更新selected' 注释掉会优化闪烁问题。

见代码示例

2. 一半约定，一般自定义组件的方式

1. app.json中声明tabBar中的custom: true，隐藏默认的tabBar，并补充完整的tab页面路径。
2. 在components中创建自定义tabBar组件，在tab页面注册该组件并传递当前页面的selected值，点击时按配置的path进行switchTab路由切换

本质1类似，但没有使用约定的目录和命名，并没有使用getTabBar，通过组件属性的方式实现菜单的激活选择

初次仍存在闪烁问题

3. 在一个页面模拟多个页面，类似SPA的标签切换控制不同组件的方式

大部分的UI库都是类似的方式，即tabBar仅仅是一个独立组件，具体显示由开发者控制

组件具体实现及使用参见TDesign、Vant Weapp - 轻量、可靠的小程序 UI 组件库，也可结合上述1、2使用。