收藏
回答

自定义tabbar切换时图标闪烁问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug TabBar 工具 7.0.9 2.10.2

使用官方的自定义tabbar demo,两个tabbar测试无异常,新增多两个tabbar切换时就会出现明显的图标闪烁

回答关注问题邀请回答
收藏

9 个回答

  • fishy
    fishy
    10-29

    除了注释掉 this.setData({ selected: data.index }),最重要的一点,不要用cover-view跟cover-image,用普通标签就可以了。完美解决闪动问题。

    10-29
    有用
    回复
  • 都会好起来
    都会好起来
    09-01

    亲测不闪

    Component({
      data: {
        selected: -1// 这里不让默认选中
        color: "#7A7E83",
        selectedColor: "#3cc51f",
        list: [{
          pagePath: "/index/index",
          iconPath: "/image/icon_component.png",
          selectedIconPath: "/image/icon_component_HL.png",
          text: "组件"
        }, {
          pagePath: "/index/index2",
          iconPath: "/image/icon_API.png",
          selectedIconPath: "/image/icon_API_HL.png",
          text: "接口"
        }]
      },
      attached() {
      },
      methods: {
        switchTab(e) {
          const data = e.currentTarget.dataset
          const url = data.path
          wx.switchTab({url})
          // 这里注释掉
          // this.setData({
          //   selected: data.index
          // })
        }
      }
    })
    
    09-01
    有用
    回复 2
    • 都会好起来
      都会好起来
      09-01
      整个页面闪烁的话,与tabbar无关
      09-01
      回复
    • 三生镜
      三生镜
      09-24
      那选中后的样式怎么设置呢?
      09-24
      回复
  • ෴
    08-06
    let selected = 0;
    
    Component({
      data: {
        list: [
          ...
        ],
      },
      attached() {
        this.setData({
          selected,
        });
      },
      methods: {
        switchTab(e) {
          const data = e.currentTarget.dataset;
          const url = data.path;
          wx.switchTab({
            url,
            fail(e) {
              console.log(e);
            },
          });
          selected = data.index;
        },
      },
    });
    
    08-06
    有用
    回复 1
    • ෴
      08-06
      Component会渲染4个实例。把 selected 独立出来,亲测不闪
      08-06
      回复
  • guo
    guo
    07-31

    这行代码注释掉就好了

    07-31
    有用
    回复 1
    • 小叶子
      小叶子
      09-19
      是的,我也发现了。。官方给的例子就这么写的,真是坑爹!
      09-19
      回复
  • 人间辞
    人间辞
    05-27
    楼主处理好了吗?我也遇到了(´。・v・。`)
    05-27
    有用
    回复 8
    查看更多(3)
  • 謝秫秫
    謝秫秫
    04-27

    // tabBar切换事件

    tab_bar_index(e) {

    const url = e.currentTarget.dataset.path

    wx.switchTab({

    url

    })

    },

    这样子试一下呢


    04-27
    有用
    回复
  • Infatuation💨
    Infatuation💨
    03-06
    这是我录的复现视频,切换的时候很明显图标在乱跳
    



    03-06
    有用
    回复
  • AKA. 皮卡超
    AKA. 皮卡超
    03-06

    代码片段运行结果:

    真机,在第一次切换Tabbar的时候由于图片要加载需要时间,故会有闪烁。

    之后再怎么切换都不会闪烁了啊。

    03-06
    有用
    回复 4
    • Infatuation💨
      Infatuation💨
      03-06
      看看我录的视频
      03-06
      回复
    • AKA. 皮卡超
      AKA. 皮卡超
      03-06回复Infatuation💨
      恕我眼拙,4张灰图,2红,2绿。8张图在切换的时候并没有闪烁啊,你现在的说法是图标乱跳,那是因为你在乱点啊,与之前所述的“闪烁”不是一个意思吧
      03-06
      回复
    • Infatuation💨
      Infatuation💨
      03-09回复AKA. 皮卡超
      确实在乱跳啊,我点很慢也会乱跳,不是因为我点得快
      03-09
      回复
    • 小小小 k
      小小小 k
      05-19
      自定义tabbar确实会存在真机第一次切换会闪烁,之后再怎么切换也不会闪烁。  but 闪烁也是个问题.... 所以最后我不自定义了,改用wx.setTabBarItem() 动态设置tabbar内容了😭
      05-19
      回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    03-06

    试下升级客户端试下?

    03-06
    有用
    回复 4
登录 后发表内容
问题标签