微信小程序自定义tabbar切换延迟以及切换闪烁问题

这篇具有很好参考价值的文章主要介绍了微信小程序自定义tabbar切换延迟以及切换闪烁问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先,吐槽一番,官方bug,好多年了,一直不解决....那我们就自己解决..

1.切换延迟

切换延迟就是点击tabbar时要点击两次icon才能正确选中,比如说首页要跳转到工单页面,要点击两次工单的图标才被激活;

微信小程序自定义tabbar切换页面闪烁,微信小程序,小程序

解决: 在对应的要跳转的页面的show生命周期里面加上以下代码即可，selected是custom-tab-bar里面当前设置选中下标的参数名; 切记,每个tabbar页面都要设置,比如说首页的selected为0,工单的selected为1,我的页面的selected为2;

onShow(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
     
    }
}

2.切换闪烁

切换闪烁就是在进行tabbar切换时,激活样式和未激活样式切换的时候会有明显的闪烁,用户体验非常不好;

解决: 在custom-tab-bar的index.js页面,切换的方法中,注释掉this.setData的操作即可;

微信小程序自定义tabbar切换页面闪烁,微信小程序,小程序

3.切换报错

切换的时候报错, WAServiceMainContext.js:2 Error: MiniProgramError {"errMsg":"switchTab:fail page \"pages/home/pages/work/index\" is not found"}

微信小程序自定义tabbar切换页面闪烁,微信小程序,小程序

解决:跳转的时候url改成模板字符串的写法,并且前边加 / 即可;

微信小程序自定义tabbar切换页面闪烁,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-810490.html

到了这里，关于微信小程序自定义tabbar切换延迟以及切换闪烁问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Toy模板网

微信小程序自定义tabbar切换延迟以及切换闪烁问题

1.切换延迟

2.切换闪烁

3.切换报错

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2