uniapp自定义底部tabbar 在App.vue中使用

### 自定义底部 TabBar 的实现

在 UniApp 项目中，通过 `App.vue` 文件创建并管理自定义底部 TabBar 组件可以遵循如下方式：

#### 修改 manifest.json 配置文件
为了启用自定义 tabBar 功能，需修改项目的根目录下的 `manifest.json` 文件中的 `"app-plus"` 字段下设置 `"usingComponents": true` 并确保 `"custom-tab-bar"` 被正确定义[^1]。

{
    "appid": "",
    "name": "YourAppName",
    ...
    "app-plus":{
        ...
        "usingComponents":true,
        "custom-tab-bar":"path/to/customTabBar"
    }
}

#### 编写 customTabBar.vue 组件
创建一个新的 Vue 单文件组件用于表示自定义的 tabBar。此组件应放置于合适的位置（如 `/components/customTabBar.vue`），并在其中设计所需的 UI 和交互逻辑[^2]。

<template>
  <view class="tab-bar">
      <!-- 这里是简化版的 tab bar -->
      <button v-for="(item, index) in tabs" :key="index" @click="switchPage(item.pagePath)">
          {{ item.text }}
      </button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tabs = [
  {
    pagePath: '/pages/index/index',
    text: '首页'
  },
  {
    pagePath: '/pages/logs/logs',
    text: '日志'
  }
];

function switchPage(path:string){
  uni.switchTab({
    url:path
  });
}

</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color:#f8f8f8 ;
  padding-top:5px ; 
  padding-bottom:5px ;
}
</style>

#### 更新 App.vue 来引入 CustomTabBar 组件
最后一步是在 `App.vue` 中注册这个新创建的组件，并将其渲染到应用界面中。如果希望在整个应用程序范围内都可见，则可以在模板内直接使用该组件标签；另外还需考虑不同平台对于原生 tabBar 显示与否的需求差异处理[^3]。

<template>
  <CustomTabBar />
  <router-view></router-view>
</template>

<script setup lang="ts">
// 导入自定义组件
import CustomTabBar from './components/customTabBar.vue';
</script>

需要注意的是，在某些情况下可能还需要调整页面路径配置以及样式以适应具体需求。此外，当涉及到更复杂的场景比如动态加载内容时，可借助状态管理库如 Pinia 或 Vuex 来帮助维护数据流[^4]。