Taro 小程序自定义tabbar点击抖动

小程序自定义tabbar首次点击tabbar会严重抖动，非常影响用户体验，目前就这个问题还没有给出比较好的解决方案
找到官方社区下发现大家都在抱怨这个问题 https://developers.weixin.qq.com/community/develop/doc/000c84de0cc590bbe54b97edf5e414?highline=自定义tabbar抖动

tabbar xml布局

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

把cover-view替换成view
cover-image替换成image 发现tabbar的抖动消失了

<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

到官方文档查找关于cover-view的介绍 发现官方也推荐使用view和image替换cover-view cover-image
cover-view和cover-image用来解决原生组件层级最高的限制，小程序在 v2.7.0 及以上版本支持在样式中声明 z-index 来指定原生组件的层级
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

目前原生组件均已支持同层渲染，建议使用 view 替代
基础库 1.4.0 开始支持，低版本需做兼容处理。
微信 Windows 版：支持
微信 Mac 版：支持