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

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

1.切换延迟

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

解决: 在对应的要跳转的页面的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的操作即可;

3.切换报错

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

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

金钥匙