收藏
回答

【持续跟踪】关于TabBar(含自定义Tabbar)的几个问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Tabbar 客户端

以下是一些关于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 (真机预览即可看到)



相关问题:

  • 暂未收集





最后一次编辑于  2019-05-09
回答关注问题邀请回答
收藏

3 个回答

  • 磊
    2019-08-15

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

    2019-08-15
    有用 3
    回复
  • 杨咩咩
    杨咩咩
    2020-12-28

    我发现了抖动是因为底部安全距离系统自动计算的问题,这个样式随便改个别的数值就不会抖

    padding-bottom: env(safe-area-inset-bottom)
    
    2020-12-28
    有用
    回复
  • 小辣椒
    小辣椒
    2019-05-08

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

    2019-05-08
    有用
    回复 5
登录 后发表内容