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 版:支持