解决微信小程序自定义tabbar闪烁问题（wepy2.x+vant）

！本文所有代码基于wepy2.0框架

1.在微信小程序中如何使用自定义tabbar

在app.wpy的config标签中设置custom属性以及各个tab页

tabBar:{
      custom: true,
      list: [{
      pagePath: "pages/index",
      text: "首页"
    }, {
      pagePath: "pages/cart",
      text: "购物车"
    }, {
      pagePath: "pages/init",
      text: "发布"
    }, {
      pagePath: "pages/init",
      text: "消息"
    }, {
      pagePath: "pages/init",
      text: "我的"
    }]
    }

在src下创建custom-tab-bar文件夹（文件名不能有改动，否则编译不出来）
custom-tab-bar文件夹中创建index.wpy

<!-- index.wpy -->
<template>
  <cover-view
    class="tab-bar"
  >
    <cover-view class="border"></cover-view>
    <cover-view
      wx:for="{{list}}"
      wx:key="index"
      class="item"
      data-path="{{item.pagePath}}"
      data-index="{{index}}"
      @tap="switchTab($event)"
    >
  <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" />
  <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
import wepy from '@wepy/core'
wepy.component({
  data: {
    selected: 0,
    color: '#7A7E83',
    selectedColor: '#6280f5',
    list: [
      {
        pagePath: 'pages/index',
        text: '首页'
      },
      {
        pagePath: 'pages/cart',
        text: '购物车'
      },
      {
        pagePath: 'pages/init',
        text: '发布'
      },
      {
        pagePath: 'pages/init',
        text: '消息'
      },
      {
        pagePath: 'pages/init',
        text: '我的'
      }
    ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path.split('/')[1]
      wx.switchTab({ url })
    },
  }
})


// NOTE: 此处导出含 config 属性的类，是为了保证编译后生成 .json 文件
export default class CustomTabBar {
  config = {
    component: true
  }
}
</script>
<config>

</config>

<style lang='less' scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  .border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
  }
  .item {
    position: relative;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .badge {
      position: absolute;
      top: 0;
      right: 50%;
      padding: 4rpx 12rpx;
      border-radius: 28rpx;
      font-size: 20rpx;
      background-color: red;
      color: #fff;
      z-index: 3;
      transform: translateX(100%);
    }
    cover-image {
      width: 27px;
      height: 27px;
      margin-bottom: 12rpx;
    }
    cover-view {
      font-size: 10px;
    }
  }
}
</style>

在每个tab页中增加

onShow() {
    if (this.$wx && typeof this.$wx.getTabBar === 'function') {
      const tabBar = this.$wx.getTabBar()
      tabBar.setData({
        selected: 0 // 由于Application是第一个tab页
      })
    }
  }

这种方法是监听每一个tab项的tap方法，最终效果tabbar会有闪烁问题——每次点一个未渲染过的页面时tabbar会重新渲染

2.解决闪烁问题：监听整个tabbar的change

<template>
  <van-tabbar
    active="{{ active }}"
    @change="Change($event)"
  >
    <van-tabbar-item
      name="home"
      icon="home-o"
    >标签</van-tabbar-item>
    <van-tabbar-item
      name="search"
      icon="search"
    >标签</van-tabbar-item>
    <van-tabbar-item
      name="friends"
      icon="friends-o"
    >标签</van-tabbar-item>
    <van-tabbar-item
      name="setting"
      icon="setting-o"
    >标签</van-tabbar-item>
  </van-tabbar>
</template>

Change(e) {
      const data = e.$wx.detail
      this.active = data
      const url = this.tabbar[data].pagePath.split('/')[1]
      wx.switchTab({ url })
    }

修改每个tab页的onShow

 onShow() {
    if (this.$wx && typeof this.$wx.getTabBar === 'function') {
      const tabBar = this.$wx.getTabBar()
      tabBar.setData({
        active: 'home'//修改这里，键名对应tabbar组件中设置的属性名
      })
    }
  }

参考：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
https://blog.csdn.net/qq_38506368/article/details/118496115
https://vant-contrib.gitee.io/vant-weapp/#/tabbar