以下是一些关于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 (真机预览即可看到)
相关问题:
暂未收集
这个问题还是存在啊,根本没修复啊,抖动问题
我发现了抖动是因为底部安全距离系统自动计算的问题,这个样式随便改个别的数值就不会抖
padding-bottom: env(safe-area-inset-bottom)
问题1:后续会支持,这个答复过。 问题2、3:机型、系统版本、微信版本,代码片段提供下,我一一跟进下
收到~
第一个问题有没有具体的时间
2、3测试机型都是Ios 12 Iphone8
第二个问题是 https://developers.weixin.qq.com/s/ycA2NemE7f81 (Ios真机预览)
第三个问题的片段是https://developers.weixin.qq.com/s/Kxzf7emy7T85 (真机预览即可看到) 哈
问题已确认,我们近期版本修复一下。另外 在安卓是不是没有抖动情况 ?
这两种安卓没有测试哈
请问一下,修复好了吗?在你们官方给的代码片段https://developers.weixin.qq.com/s/jiSARvmF7i55
在开发者工具里面来回点击,会一直闪烁,会影响用户体验呢
每次切换都会闪烁