收藏
评论

自定义tabbar切换时会闪烁

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

133 个评论

  • ๛
    2023-02-08

    2023宇宙闪烁无解

    2023-02-08
    赞同 3
    回复
  • 🌞
    🌞
    2022-08-11

    家人们 我知道了

    切换的时候设置globalData


    在自定义tabbar的生命周期里setData

    2022-08-11
    赞同 3
    回复 14
    • 🌞
      🌞
      2022-08-11
      亲测 不闪
      2022-08-11
      回复
    • XiaoYu_
      XiaoYu_
      2022-08-23
      第一次还是闪
      2022-08-23
      回复
    • 千年城
      千年城
      2022-08-25
      我也试试看呢
      2022-08-25
      回复
    • 周生
      周生
      2022-11-12
      不行呀
      2022-11-12
      回复
    • Aaron
      Aaron
      2023-05-14
      老哥,牛逼,谢谢你!
      2023-05-14
      回复
    查看更多(9)
  • 2021-03-11

    会闪是因为每次打开页面或者切换TabBar都会重新新开一个TabBar,造成页面实际上有多个自定义TabBar重叠。

    图片是模拟器中页面滚动时浏览器弹动效果看到的加载了多次自定义TabBar并重叠显示了。而且好像每次切换tab打开TabBar中的页面,都会多打开一个TabBar。TabBar配置5个tab,实际TabBar可能重叠有5-6层。

    2021-03-11
    赞同 3
    回复 3
    • 烟雨平生
      烟雨平生
      2021-05-05
      请问这个解决了吗···
      2021-05-05
      回复
    • Lemon
      Lemon
      2021-06-01
      是的 而且有几个tabbar就会重新渲染几次tabbar 导致重叠 经过代码断点才发现这个。
      希望可以全局保持custom-bar的独立渲染空间,不跟page结合 避免重复渲染
      2021-06-01
      回复
    • Lemon
      Lemon
      2021-06-02
      点击一次切换 渲染4次 。。
      2021-06-02
      回复
  • ······
    ······
    2020-12-04

    持续关注 自定义tabbar加载分包的时候 会先闪一下

    2020-12-04
    赞同 3
    回复 1
    • @
      @
      2021-11-04
      不分包也闪
      2021-11-04
      回复
  • LevenHan
    LevenHan
    2023-08-10

    今天是2026年8月10日,微信小程序快倒闭了,偶然间被指派维护公司这个老项目,该问题依然没有得到解决

    2023-08-10
    赞同 2
    回复
  • ꯭来꯭吧꯭,꯭宝꯭贝꯭
    ꯭来꯭吧꯭,꯭宝꯭贝꯭
    2023-05-29

    custom-tab-bar/index.js文件

    第一步:将data中定义得 selected赋值为null

     

    第二步:将methods中得switchTab函数中之前得selected赋值操作删除 (注:selected赋值在其他tarbar的页面得onShow方法中已赋值过了)


    2023-05-29
    赞同 2
    回复 2
    • 红薯
      红薯
      06-18
      可以的,没有之前的左侧第一个tabBar闪烁了
      06-18
      回复
    • h
      h
      星期五 15:41
      有用的,没有之前那么闪了,厉害厉害!老哥
      星期五 15:41
      回复
  • 飞越
    飞越
    2022-03-24

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

    2022-03-24
    赞同 2
    回复 5
    • 飞越
      飞越
      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
      回复
  • 小王子
    小王子
    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)
  • 吴建昆
    吴建昆
    2021-08-17

    时至今日,问题依然存在,但在模拟器上不闪

    2021-08-17
    赞同 2
    回复 4
    • charles
      charles
      2021-10-14
      时至今日,模拟器也闪了
      2021-10-14
      2
      回复
    • 绊中二
      绊中二
      2021-10-30
      这个闪烁到现在还没解决就离谱
      2021-10-30
      1
      回复
    • 夏至已至
      夏至已至
      2023-02-23回复绊中二
      2023年了,还是这样
      2023-02-23
      1
      回复
    • kkoy
      kkoy
      2023-09-05
      垃圾公司,这么重要的组件也有低级bug,还不解决,真的坑
      2023-09-05
      回复
  • LTX-大橘为重(个)
    LTX-大橘为重(个)
    07-02

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

    07-02
    赞同 1
    回复

正在加载...

登录 后发表内容