uniapp自定义tabbar不闪烁的具体代码

对于UniApp中自定义TabBar不闪烁的问题，你可以尝试以下代码：

1. 在App.vue中，设置tabBar的配置项`custom: true`，以及在`onLaunch`生命周期函数中调用`uni.hideTabBar()`来隐藏原生的TabBar。

<template>
  <div>
    <cu-custom-tab-bar></cu-custom-tab-bar>
  </div>
</template>

<script>
export default {
  onLaunch() {
    uni.hideTabBar()
  }
}
</script>

2. 创建一个名为`cu-custom-tab-bar.vue`的组件，用于自定义TabBar的样式和行为。

<template>
  <div class="cu-custom-tab-bar">
    <div
      v-for="(item, index) in tabBarList"
      :key="index"
      @click="switchTab(index)"
      :class="['cu-tab', current === index ? 'cu-tab-active' : '']"
    >
      <div class="cu-tab-icon">
        <img :src="current === index ? item.selectedIconPath : item.iconPath" alt="" />
      </div>
      <div class="cu-tab-text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0, // 当前选中的Tab索引
      tabBarList: [
        {
          iconPath: '/static/tabBar/home.png',
          selectedIconPath: '/static/tabBar/home_active.png',
          text: '首页'
        },
        {
          iconPath: '/static/tabBar/cart.png',
          selectedIconPath: '/static/tabBar/cart_active.png',
          text: '购物车'
        },
        {
          iconPath: '/static/tabBar/user.png',
          selectedIconPath: '/static/tabBar/user_active.png',
          text: '我的'
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      // 切换Tab
      this.current = index
      // 执行相应的操作，比如跳转页面等
      // ...
    }
  }
}
</script>

<style>
/* 样式自定义，请根据需要修改 */
.cu-custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
}

.cu-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cu-tab-icon img {
  width: 24px;
  height: 24px;
}

.cu-tab-text {
  font-size: 12px;
  margin-top: 2px;
}

.cu-tab-active {
  color: #007aff; /* 选中时的颜色 */
}
</style>

以上代码是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望能帮到你！