在做自定义tabbar时,遇到了个问题,第一次切换tab,底部操作栏会明显的感觉闪烁,并且选中状态还会有抖动现象出现
这里在网上找到几个解决方法汇总一下
1、在tab页的onShow生命周期写了切换选中状态后,tab组件那边的切换就没必要再加setData去修改选择的状态了,可以直接注释掉
js

这里要是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-viewcover-image 分别替换为 viewimage
3、image 可以写两个,用hidden进行切换状态,这样,不用切换之后重新加载图片了wxml
4、根据第三点 image 的src参数,可以直接将图片转为 base64 字符串,只是可读性差了点
5、还有一个社区看到一大佬提出方法,博主没有去尝试,感觉效果应该没什么变化
社区
末言:都2020年了,微信小程序官方还是没人回复,离谱的
(博主改完之后还是会有一点点闪烁,但是没那么明显了,怀疑是每个页面都单独的内嵌了自定义的tabar,在切换页面的,去切换tabar的层级,那由于页面的切换闪烁就必不可免了,除非微信官方去修改,将自定义的tabar内嵌改成唯独只有一个,这样就不会出现闪烁的问题)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐