收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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 (真机预览即可看到)



相关问题:

  • 暂未收集





最后一次编辑于  05-09  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 娇华
    娇华
    05-08

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

    05-08
    赞同
    回复 5
    • 陈式坚
      陈式坚
      05-09

      收到~


      第一个问题有没有具体的时间



      2、3测试机型都是Ios 12 Iphone8


      第二个问题是 https://developers.weixin.qq.com/s/ycA2NemE7f81 (Ios真机预览)


      第三个问题的片段是https://developers.weixin.qq.com/s/Kxzf7emy7T85 (真机预览即可看到) 哈

      05-09
      回复
    • 黄思程
      黄思程
      05-13回复陈式坚

      问题已确认,我们近期版本修复一下。另外 在安卓是不是没有抖动情况 ?

      05-13
      1
      回复
    • 陈式坚
      陈式坚
      05-14回复黄思程

      这两种安卓没有测试哈

      05-14
      回复
    • 梦太晚
      梦太晚
      06-20回复黄思程

      请问一下,修复好了吗?在你们官方给的代码片段https://developers.weixin.qq.com/s/jiSARvmF7i55

      在开发者工具里面来回点击,会一直闪烁,会影响用户体验呢

      06-20
      回复
    • 梦太晚
      梦太晚
      06-20回复梦太晚

      每次切换都会闪烁


      06-20
      回复
  • 磊
    08-15

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

    08-15
    赞同 1
    回复