微信小程序自定tabbar(解决图标闪、解决任何界面都会出现tabbar的问题)

背景：在开发小程序的时候，微信小程序给出的原生tabbar很难满足公司产品的需求，很多时候我们还是要自定义tabbar的，目前为止，自定义tabbar在第一次切换还是会闪一下，之后就不会，官方也没有给出解决方案。（这是由于点击tabbar的时候，初次会加载页面，这个问题没办法解决。）

1.可以解决初次点击出现闪屏的方案，将tabbar作为pages,显示的内容作为组件显示，这样就不会出现闪屏的问题。

<!-- 组件显示 -->
<view hidden="{{currentTab == 0? false: true}}">
  <component_index/>
</view>
<view hidden="{{currentTab == 1? false: true}}">
  <component_car/>
</view>
<view hidden="{{currentTab == 2? false: true}}">
  <component_my/>
</view>

<!-- 自定义 tabbar -->
<view class="nav-tabs">
  <view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="swichNav">
    <text class="tab-text" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}">{{item.text}}</text>
    <image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
  </view>

可参考源码： https://github.com/noneName002/wx-diy-tabbar
这样的设计模式的话，可能会出现的问题就是：显示的界面是用组件，pages的生命周期和组件的生命周期可能会出现不可避免的问题。

2.参照官网给出的设计模式。
步骤1：在 app.json 中的 tabBar 项指定 custom 字段为"true"

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

步骤2：在代码根目录下添加入口文件

注意：需要自定义一个show属性来控制tabbar的显示，不然的话，所有创建的页面都会显示tabbar。

这里有一个小坑，app.json中的tabbar中的list不能省略，并且要跟自定义tabbar中的list一致，否则会出现报错的情况：

步骤3：显示tabbar中的页面中，添加以下代码：（show是为了控制tabbar是否在该界面显示）

步骤4：tabbar图标会出现闪的情况，只要把tabbar自定义组件的this.setData中的代码注释掉就可以解决tabbar图标闪烁的问题。

以上是我自己在做小程序自定义tabbar遇到的坑，如果有更好的解决方案，还请大佬指教。