收藏
评论

自定义tabbar切换时会闪烁

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

125 个评论

  • Amour
    Amour
    2021-08-27

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

    2021-08-27
    赞同 24
    回复 14
    • 安先
      安先
      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
      回复
    查看更多(9)
  • Serendipity
    Serendipity
    2021-05-12

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

    2021-05-12
    赞同 12
    回复 21
    • Anker.
      Anker.
      2021-06-10
      都 2022年了, 官方还没给个答复,也是醉了,,,,,,
      2021-06-10
      1
      回复
    • 何涛
      何涛
      2021-06-23
      都 2022年中旬了, 官方还没给个答复,也是醉了,,,,,,
      2021-06-23
      3
      回复
    • 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
      回复
    查看更多(16)
  • Anker.
    Anker.
    2021-06-10

    官方自定义tabbar 好垃圾啊,实习生写的吧

    2021-06-10
    赞同 11
    回复
  • showms
    showms
    2021-05-07

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

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

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

    2022-03-16
    赞同 9
    回复 1
    • julius
      julius
      2023-11-27
      开发过小程序的同学不会还真有人相信腾讯的技术实力吧。
      2023-11-27
      1
      回复
  • 冯锋
    冯锋
    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
      2
      回复
    • Charon
      Charon
      2023-05-17回复你的名字
      但是闪烁是整个tabbar闪烁啊,并不是上面的字和icon
      2023-05-17
      1
      回复
  • Const
    Const
    2021-07-27

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

    2021-07-27
    赞同 7
    回复 50
    • 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
      回复
    查看更多(45)
  • 毕少侠在江湖
    毕少侠在江湖
    2021-12-30

    都TM 2022年了,还在闪烁。。。

    2021-12-30
    赞同 6
    回复 3
    • 云天
      云天
      2023-07-04
      2023了还在闪
      2023-07-04
      回复
    • 千寻
      千寻
      01-11
      2024了,还在闪!
      01-11
      回复
    • !!!
      !!!
      01-22
      2024年1月22日,依旧没有解决,我不知道他们开发人员在干什么
      01-22
      回复
  • 王千秋
    王千秋
    2023-06-14

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

    2023-06-14
    赞同 4
    回复
  • 得得得得得得得得得得得得得得得
    得得得得得得得得得得得得得得得
    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
    回复 5
    • 白茶清欢
      白茶清欢
      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
      回复

正在加载...

登录 后发表内容