收藏
回答

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

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

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

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

11 个回答

  • 小程序商城定制开发2600元全包
    小程序商城定制开发2600元全包
    05-30

    将methods中得switchTab函数中之前得selected赋值操作删除 

    05-30
    有用 1
    回复
  • iaaiNG
    iaaiNG
    2020-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;
        },
      },
    });
    
    2020-08-06
    有用 1
    回复 2
    • iaaiNG
      iaaiNG
      2020-08-06
      Component会渲染4个实例。把 selected 独立出来,亲测不闪
      2020-08-06
      回复
    • 违规昵称
      违规昵称
      04-06
      安卓亲测闪,ios不闪
      04-06
      回复
  • 🖕
    🖕
    2020-12-11

    楼主解决没有


    2020-12-11
    有用
    回复
  • funguy
    funguy
    2020-10-29

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

    2020-10-29
    有用
    回复
  • 都会好起来
    都会好起来
    2020-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
          // })
        }
      }
    })
    
    2020-09-01
    有用
    回复 2
    • 都会好起来
      都会好起来
      2020-09-01
      整个页面闪烁的话,与tabbar无关
      2020-09-01
      回复
    • __proto__
      __proto__
      2020-09-24
      那选中后的样式怎么设置呢?
      2020-09-24
      回复
  • guo
    guo
    2020-07-31

    这行代码注释掉就好了

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

    // tabBar切换事件

    tab_bar_index(e) {

    const url = e.currentTarget.dataset.path

    wx.switchTab({

    url

    })

    },

    这样子试一下呢


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



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

    代码片段运行结果:

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

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

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

正在加载...

登录 后发表内容
问题标签