【持续跟踪】关于TabBar(含自定义Tabbar)的几个问题
发布于 5 年前 作者 hdong 7156 次浏览 来自 问答

以下是一些关于TabBar在使用上遇到的几个问题

20190509 18:00更新

搞了一个下午,还是不能完美的解决问题,目前的遗留的问题,除了下面3个,还有

  • 一般的安卓设备,进入后快速点击,开始会造成屏幕闪动 =》 很正常,因为小程序项目比较大,本来就卡,但是作为Tabbar不是预先加载还是有点麻烦,会让用户觉得更卡

  • Index也会加载一次tabbar… 这个造成会造成一系列判断问题 =》 只能通过判断所属页面进行适配,按道理,应该是只有tab页才会出现才对

  • 如果tabbar里的图片是通过view的background-image加载,那么不管安卓还是ios都会卡炸

  • tabbar里的图片只能使用image比较不卡,但是造成的问题就,第一次进入页面会优先加载这tab的图片,一下n +1条数据,有点阻塞

  • Ios每次进入新的页面就会渲染一次图片,这就导致,进入会闪一下,而安卓则不会

  • 安卓下拉,tabbar也会跟着下拉…


1. TabBar的背景颜色(backgroundColor)不能设置透明度


问题描述:

如题

解决状态:

已加入需求池,暂无计划时间信息

低优先级

临时解决方案:

暂无


相关问题:


2. 自定义TabBar第一次点击会发生抖动(闪动)

问题描述:

Tabbar的每一个页面,第一次点击的时候,都会发生抖动

在调试工具上不会触发,但是在Ios中一定会触发

而安卓设备,有时候会整个屏幕变黑屏,或者消失。而有时候则完全不会抖动

原因猜测:

造成原因一:

猜测因为第一次点击的页面都是没有渲染的,所以渲染会导致tabbar位置(或样式)也需要一定时间初始化

或者说,和我们的路由概念不同,路由是页面和tabbar分开渲染,而小程序则是在每个tab页面都自动插入自定义Tabbar组件。



想起之前看到过的一种自定义Tabbar解决方案,是在进入页面的时候隐藏tab来实现,感觉是同种解决方案


  • [文档] 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。

通过created生命周期console,确实是每个页面一个Tabbar组件...


造成原因二:

录了一下屏,发现上下抖动的原因出现了原生Tab的位置,所以导致自定义Tabbar位置上移


解决状态:

暂未解决,暂无计划时间信息

代码片段:

https://developers.weixin.qq.com/s/ycA2NemE7f81 (Ios真机预览)

临时解决方案:

  • tabbar默认样式隐藏 =》 在生命周期ready的时候再显示。 至少出现的时候好看一些

相关问题:

  • 暂未收集


3. 自定义TabBar切换时会位置会发生抖动(闪动)情况

问题描述:

和第二个问题不同,这个问题是所有Tab页面都点击过,再切换时Tabbar的位置会上下抖动以下

问题猜测:

这个问题大概知道是因为,每个tab页面的navigationStyle设置问题,如果不是custom,那么就影响到页面的高度

解决状态:

暂未解决,暂无计划时间信息

临时解决方案:

  • 所有Tab页面的navigationStyle设置为'custom',或者都不设置

__
__

代码示例:

https://developers.weixin.qq.com/s/Kxzf7emy7T85 (真机预览即可看到)

相关问题:

  • 暂未收集


2 回复

问题1:后续会支持,这个答复过。问题2、3:机型、系统版本、微信版本,代码片段提供下,我一一跟进下

这个问题还是存在啊,根本没修复啊,抖动问题

回到顶部