uniapp 自定义底部tabbar 点两下 会闪烁问题_uniapp小程序动态设置的tabbar需要点击第一次切换页面,点击第二次才会改变tabbar

在做自定义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
        })
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

然后在每个tab页的onShow生命周期调用一下

this.setTabBarIndex(1) //当前tab的索引
1

）
2、tab组件的wxml文件中 cover-view 和cover-image 分别替换为 view 和 image
3、image 可以写两个，用hidden进行切换状态，这样，不用切换之后重新加载图片了
4、根据第三点 image 的src参数，可以直接将图片转为 base64 字符串，只是可读性差了点
5、还有一个社区看到一大佬提出方法，博主没有去尝试，感觉效果应该没什么变化

末言：都2020年了，微信小程序官方还是没人回复，离谱的
（博主改完之后还是会有一点点闪烁，但是没那么明显了，怀疑是每个页面都单独的内嵌了自定义的tabar，在切换页面的，去切换tabar的层级，那由于页面的切换闪烁就必不可免了，除非微信官方去修改，将自定义的tabar内嵌改成唯独只有一个，这样就不会出现闪烁的问题）