收藏
评论

自定义tabbar切换时会闪烁

预估支持的基础库版本 预估支持的客户端版本 平台 预估发布版本
- - - -
  1. 减少不必要的 setData 可以消除 data 变化导致的闪烁现象
  2. 使用普通 image 代替 cover-image 、普通 view 代替 cover-view 可以减弱由于 cover 组件创建偏慢导致的闪烁现象(但要注意组件层叠层级) 但 android 本身的的渲染延迟仍然会导致一部分闪烁现象
最后一次编辑于  2023-05-11
关注Issue发表评论
赞 42

84 个评论

  • 飞越
    飞越
    2022-03-24

    老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题

    2022-03-24
    赞同 2
    回复 6
    • 飞越
      飞越
      2022-03-24
      老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题
      2022-03-24
      回复
    • 飞越
      飞越
      2022-03-24回复飞越
      老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题
      2022-03-24
      回复
    • 飞越
      飞越
      2022-03-24回复飞越
      老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题
      2022-03-24
      回复
    • 飞越
      飞越
      2022-03-24
      老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题
      2022-03-24
      回复
    • 飞越
      飞越
      2022-03-24
      老板,android机还是会闪的,这个问题很久了,是不是自定义tabbar不想支持android?为啥根本没人修复这个问题
      2022-03-24
      回复
    查看更多(1)
  • 小王子
    小王子
    2022-02-23

    看了别人的回复,照着做第一次切换还是会闪烁,经过分析第一次切换闪烁是因为额外多了icon图片的请求,所以解决方案如下:

    1.cover-view改成view,cover-image 改成image, cover 这些官方不建议使用。

    2.将TabBar 用到的所有图片使用 base64 字符串替换,可以额外减少HTTP的请求(缺点:可读性差一点)

    3.在自定义tabbar 组件switchTab 方法中,不要再setData selected 属性。


    2022-02-23
    赞同 2
    回复 8
    • 小王子
      小王子
      2022-02-23
      我这个是可以成功的,如果可以请大家试一下,成功的话请大家多点赞一下置顶,帮助以后别人快速的解决问题。
      2022-02-23
      回复
    • 噗通
      噗通
      2022-02-24
      第三点 如果不setData selected 属性的话 那怎么做啊
      2022-02-24
      回复
    • Yz
      Yz
      2022-07-10
      你这个解决方案并没有完全解决. 经过我的测试, cover-view替换为view, cover-image替换为image之后.   闪烁的非常快, 不仔细看的话可能发现不了他在闪烁, 我紧盯着看, 发现实际上还是有闪烁的.


      cover-view和cover-image只在第一次点击时会有一个非常明显的闪烁, 后续不会再闪烁.


      目前应该是只有单页才能实现不闪烁, 不使用他提供的tabbar
      2022-07-10
      1
      回复
    • 氷氷
      氷氷
      2022-09-27
      试了 无效
      2022-09-27
      回复
    • 苏茂林
      苏茂林
      2022-10-06
      1,采用了,2条用 iconfont 自定义icon实现,3采用了但是还是有闪烁的效果,无效啊!
      2022-10-06
      回复
    查看更多(3)
  • go-Ball
    go-Ball
    2024-12-26

    我去,都2025年了,还没。。。

    2024-12-26
    赞同 1
    回复 1
    • ㅤㅤ
      ㅤㅤ
      02-10
      02-10
      回复
  • Adam
    Adam
    2024-12-13

    今天是2024年12月13日,马上2025年。依旧闪烁呀...


    2024-12-13
    赞同 1
    回复
  • ㅤ
    2024-11-20

    顺丰小程序没有这个问题

    2024-11-20
    赞同 1
    回复 1
    • ㅤㅤ
      ㅤㅤ
      02-10
      我看过顺丰小程序的tabbar,不知道咋做的
      02-10
      回复
  • LTX-大橘为重(个)
    LTX-大橘为重(个)
    2024-07-02

    2024年7月了,这个bug还没解决吗?官网团队在干嘛

    2024-07-02
    赞同 1
    回复
  • 
    
    2023-12-29

    都马上2024年了, 官方还没给个答复,也是醉了,,,,,,

    2023-12-29
    赞同 1
    回复
  • Boy
    Boy
    2022-11-11

    上述方法实践后,都无法逃脱tabbar在每次页面加载时,会被重新渲染, 通过this.getTabBar(),也只是设置你tabBar选中的时候状态,问题在于switchTab跳转的页面中,custom-tab-bar这个组件是每次都被渲染,图片被重新加载,不可避免的出现闪现,只是图片小,闪现更短,只能制作成一个页面才能解决吗

    2022-11-11
    赞同 1
    回复
  • chenger
    chenger
    2022-10-21

    我去看了下其他的小程序(唯品会、中百、boss),丝滑得很啊。疯狂尝试各种方法,终于

    第一步把自定义tabBar中this.setData({selected: data.index })注掉。

    第二步cover-view换成view,cover-image换成van-icon再设置对应的图标(图标是用vant自带的),提上体验版也很丝滑。





    2022-10-21
    赞同 1
    回复 1
    • 两千里
      两千里
      2022-11-18
      这几个小程序是自定义的吗?我瞅了一眼,我感觉就是原生然后点击切换图片啊。还有你说的两步我都尝试过,不行
      2022-11-18
      回复

正在加载...

登录 后发表内容