在做自定义tabbar时,遇到了个问题,第一次切换tab,底部操作栏会明显的感觉闪烁,并且选中状态还会有抖动现象出现
这里在网上找到几个解决方法汇总一下
1、在tab页的onShow
生命周期写了切换选中状态后,tab组件那边的切换就没必要再加setData
去修改选择的状态了,可以直接注释掉
(
这里要是onShow那边没做切换tab时的操作,可以这样做
main.js加个下面的代码
Vue.mixin({
methods:{
setTabBarIndex(index){
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected:index
})
}
}
}
})
然后在每个tab页的onShow
生命周期调用一下
this.setTabBarIndex(1) //当前tab的索引
)
2、tab组件的wxml
文件中 cover-view
和cover-image
分别替换为 view
和 image
3、image
可以写两个,用hidden进行切换状态,这样,不用切换之后重新加载图片了
4、根据第三点 image
的src参数,可以直接将图片转为 base64 字符串,只是可读性差了点
5、还有一个社区看到一大佬提出方法,博主没有去尝试,感觉效果应该没什么变化
末言:都2020年了,微信小程序官方还是没人回复,离谱的
(博主改完之后还是会有一点点闪烁,但是没那么明显了,怀疑是每个页面都单独的内嵌了自定义的tabar,在切换页面的,去切换tabar的层级,那由于页面的切换闪烁就必不可免了,除非微信官方去修改,将自定义的tabar内嵌改成唯独只有一个,这样就不会出现闪烁的问题)