uniapp具体如何在App.vue中使用自定义tabbar

在使用自定义 TabBar 时，需要在 App.vue 中定义自己的 TabBar，并在每个页面中隐藏原生的 TabBar。下面是具体实现步骤：

1. 在 App.vue 中定义自定义 TabBar，并在页面底部显示。例如：

<template>
  <div>
    <router-view></router-view>
    <div class="custom-tabbar">
      <div class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(index)">
        <img :src="selected === index ? item.selectedIconPath : item.iconPath" alt="">
        <div :class="{active: selected === index}">{{item.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 0, // 当前选中的 TabBar 索引
      tabbarList: [
        {
          iconPath: "static/tabbar/home.png",
          selectedIconPath: "static/tabbar/home-active.png",
          text: "首页",
          pagePath: "/pages/index/index"
        },
        {
          iconPath: "static/tabbar/mine.png",
          selectedIconPath: "static/tabbar/mine-active.png",
          text: "我的",
          pagePath: "/pages/mine/index"
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      const url = this.tabbarList[index].pagePath;
      if (url !== this.$route.path) {
        uni.switchTab({
          url,
          fail: () => {}
        });
        this.selected = index;
      }
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 12px;
  color: #666;
}

.tabbar-item img {
  width: 24px;
  height: 24px;
}

.tabbar-item .active {
  color: #007aff;
}
</style>

2. 在每个页面中隐藏原生的 TabBar。可以在页面的 onShow 钩子函数中调用 uni.hideTabBar() 来实现。例如：

export default {
  onShow() {
    uni.hideTabBar();
  }
};

这样就可以在 App.vue 中使用自定义 TabBar，并在每个页面中隐藏原生的 TabBar。