自定义tabbar切换时会闪烁

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

135 个评论

  • Amour
    Amour
    2021-08-27

    都 2023年中旬了, 官方还没给个答复,也是醉了,,,,,,

    2021-08-27
    赞同 25
    回复 18
    • 少男少女说
      少男少女说
      2023-02-07
      真2023了
      2023-02-07
      回复
    • sky
      sky
      2023-04-24
      当然啦,因为我们有求于他们。
      2023-04-24
      回复
    • 司马缸砸光
      司马缸砸光
      2023-06-08
      真是个谢特,18年遇到的问题现在都没解决
      2023-06-08
      回复
    • @
      @
      2023-07-29
      等了三年,就中止了?
      2023-07-29
      回复
    • 角落
      角落
      2023-08-14
      泪目了,还没解决么
      2023-08-14
      回复
    查看更多(13)
  • Serendipity
    Serendipity
    2021-05-12

    都 2021年中旬了, 官方还没给个答复,也是醉了,,,,,,

    2021-05-12
    赞同 12
    回复 19
    • Anker.
      Anker.
      2021-06-10
      都 2022年了, 官方还没给个答复,也是醉了,,,,,,
      2021-06-10
      1
      回复
    • 何涛
      何涛
      2021-06-23
      都 2022年中旬了, 官方还没给个答复,也是醉了,,,,,,
      2021-06-23
      4
      回复
    • John
      John
      2021-06-23
      官方觉得这个问题不影响kpi
      2021-06-23
      4
      回复
    • 何涛
      何涛
      2021-06-25
      可能最好的方案是单页应用,不用微信提供的自定义tabbar
      2021-06-25
      2
      回复
    • 69.7
      69.7
      2021-06-25
      关注一下,希望官方能够快一点解决呀。。。。
      2021-06-25
      1
      回复
    查看更多(14)
  • showms
    showms
    2021-05-07

    其实他要是多个页面都用同一个tabbar实例可能就没有这个问题了

    2021-05-07
    赞同 12
    回复
  • 善缘
    善缘
    2022-03-16

    现在都2022年了,这么多用户反馈了2年多的问题还解决不了吗,我不相信以腾讯的实力解决不了这个问题,如果个别开发人员解决不了这个问题,腾讯这么多技术大佬能帮忙解决下吗。

    2022-03-16
    赞同 10
    回复 1
    • julius
      julius
      2023-11-27
      开发过小程序的同学不会还真有人相信腾讯的技术实力吧。
      2023-11-27
      2
      回复
  • Const
    Const
    2021-07-27

    2020-11-25发布的问题,今天是2021-07-27,还没解决么,绩效扣光了!

    2021-07-27
    赞同 8
    回复 57
    • YinFengrui
      YinFengrui
      2022-01-28
      到我了到我了,今天是2022年1月28日 ,还没解决么,绩效扣光了!
      2022-01-28
      回复
    • 萝卜牛奶冰激凌
      萝卜牛奶冰激凌
      2022-04-15
      到我了到我了,今天是2022年4月15日 ,还没解决么,绩效扣光了!
      2022-04-15
      回复
    • L
      L
      2022-05-17
      到我了到我了,今天是2022年5月17日 ,还没解决么,绩效扣光了!
      2022-05-17
      回复
    • 何涛
      何涛
      2022-06-12
      到我了到我了,今天是2022年6月12日 ,还没解决么,绩效扣光了!
      2022-06-12
      回复
    • 今禾
      今禾
      2022-06-23
      到我了到我了,今天是2022年6月23日 ,还没解决么,绩效扣光了!
      2022-06-23
      回复
    查看更多(52)
  • 冯锋
    冯锋
    2022-02-11

    可以将原来放置 image 标签的位置,替换为两个 image 标签,一个存放选中图片路径,一个存放未选中图片路径,然后通过 selected 状态来控制是否展示元素(将不需要展示的元素设置为 visibility: hidden;)。

    此时页面会同时渲染所有的 icon 图片,即使不需要展示,也会渲染,因此会有一个透明的占位,此时可以使用 position: absolute 布局来使其重叠展示(根据具体业务逻辑灵活调整)

    使用上述方法,可以解决“首次切换闪烁”的问题,不过存在两点不足:

    1. 图片路径必须使用网络地址(不清楚为啥);

    2. 如果 icon 下需要展示文字描述,会错位,可以考虑将文本和 icon 合并为一个新的 icon 来解决;

    下面是使用官方 demo 首次加载后切换的效果:

    下面是优化以后的效果:

    下面是主要实现代码:

    <view class="tab-bar">
      <view class="tab-bar-border"></view>
      <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <image class="img" src="{{item.selectedIconPath}}" style="{{selected === index?'':'可见性: 隐藏;'}}"></image>
        <image class="img" src="{{item.iconPath}}" style="{{selected === index?'visibility: hidden;':''}}"></image>
      </view>
    </view>
    
    2022-02-11
    赞同 7
    回复 3
    • Shgdom
      Shgdom
      2022-12-29
      好方法,多谢大神!
      2022-12-29
      回复
    • 你的名字
      你的名字
      2023-02-16
      你只解决了icon加载导致的闪烁问题,但是tab切换页面首次渲染导致至整个tabbar闪烁的问题还是无法解决啊
      2023-02-16
      3
      回复
    • Charon
      Charon
      2023-05-17回复你的名字
      但是闪烁是整个tabbar闪烁啊,并不是上面的字和icon
      2023-05-17
      1
      回复
  • 王千秋
    王千秋
    2023-06-14

    真NB啊腾讯,状态直接中止了,自家腾讯云小程序都有这个问题,打死不修呗

    2023-06-14
    赞同 5
    回复
  • 得得得得得得得得得得得得得得得
    得得得得得得得得得得得得得得得
    2022-01-06

    超过两个tabbar页不要单纯的使用官方说的show时getTabBar().setData设置选中态,自定义tabbar是多个实例的,那样只会改变当前tabbar实例的选中态,其他页面的tabbar实例并没有改变选中态,这样会导致你说的那些问题。

    正确做法:

    在每个tabbar lifetimes attached时找个地方(比如globalData)存进去,然后在每个tabbar页面show时遍历存的tabbar实例setData 选中态, 因为官方demo只有两个tabbar页,于是只获取当前页的tabbar实例setData不会有问题,官方这个不回复态度就是只管拉屎不管搽屁股。

    2022-01-06
    赞同 4
    回复 6
    • 白茶清欢
      白茶清欢
      2022-01-11
      大佬给个示例吧
      2022-01-11
      回复
    • 略略略🇨🇳
      略略略🇨🇳
      2022-03-02
      同求示例
      2022-03-02
      回复
    • 媛媛
      媛媛
      2022-04-22
      同求
      2022-04-22
      回复
    • Murph
      Murph
      2022-07-25
      感谢 正解!
      2022-07-25
      回复
    • JeanHAOo  ོ་
      JeanHAOo ོ་
      2023-11-28回复Murph
      怎么解决的啊
      2023-11-28
      回复
    查看更多(1)
  • blingbling
    blingbling
    2023-03-15

    今天是2023年3月15日(国际消费者权益日),第一次切换依旧还在闪烁。

    2023-03-15
    赞同 3
    回复
  • win
    win
    2023-03-03

    2023年了这个问题还没解决吗?体验太差了

    2023-03-03
    赞同 3
    回复 1
    • 司马缸砸光
      司马缸砸光
      2023-06-08
      微信真是托谢特
      2023-06-08
      1
      回复

正在加载...

登录 后发表内容