记录微信小程序tabbar不显示问题：uni-app Vue 3 自定义 tabBar 不渲染

⚡⚡⚡ 欢迎预览，批评指正⚡⚡⚡

---

文章目录

• • 1，问题描述
  • 2，根本原因
  • [3，解决方案：显式引入 + 手动放置](#3，解决方案：显式引入 + 手动放置)
  • • [3.1，步骤 1：组件位置](#3.1，步骤 1：组件位置)
    • [3.1，步骤 2：修改每个 tabBar 页面](#3.1，步骤 2：修改每个 tabBar 页面)
  • 4，修改检查清单
  • 5，编译与验证
  • 6，为什么需要这样改？
  • 7，注意事项

---

1，问题描述

uniapp项目运行编译在游览器后，tabbar显示正常，但是在微信开发者工具中测试运行项目时发现不显示tabbar

。

2，根本原因

uni-app Vue 3 编译到微信小程序时，pages.json 中配置的：

json
"tabBar": {
  "custom": true
}

自动实例化机制不可靠。框架并未按预期自动创建并挂载 custom-tab-bar 组件，导致自定义 tabBar 完全不显示。

3，解决方案：显式引入 + 手动放置

在全部 4 个 tabBar 页面中，显式引入组件并在模板中手动放置。

3.1，步骤 1：组件位置

确保自定义 tabBar 组件位于：

text
src/
└── custom-tab-bar/
    └── index.vue

3.1，步骤 2：修改每个 tabBar 页面

需要对以下 4 个文件做完全相同的修改：

pages/home/home.vue

pages/points/points.vue

pages/profile/profile.vue

pages/upload/upload.vue

修改内容

① 在

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
// 其他 import...
</script>

② 在 中放置组件

<template>
  <view class="page-container">
    <!-- 页面原有内容 -->
    
    <!-- 手动放置自定义 tabBar -->
    <CustomTabBar />
  </view>
</template>

③ 关键样式（已在组件内或全局保证）

.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

4，修改检查清单

文件路径	已引入	已放置	样式正确
pages/home/home.vue	✅	✅	✅
pages/points/points.vue	✅	✅	✅
pages/profile/profile.vue	✅	✅	✅
pages/upload/upload.vue	✅	✅	✅

5，编译与验证

重新编译

npm run dev:mp-weixin

# 或
npx uni -p mp-weixin

验证点

• 微信开发者工具中，tabBar 是否固定显示在底部
• 切换页面时 tabBar 是否保持显示
• 激活状态（active）是否正常工作
• 点击切换是否正常

6，为什么需要这样改？

方案	可靠性	说明
custom: true 自动实例化	❌ 不可靠	uni-app Vue 3 编译到小程序时存在 bug
手动引入 + 放置	✅ 可靠	完全可控，不依赖框架的自动实例化逻辑

7，注意事项

1. 避免重复渲染：确保没有其他地方再次自动实例化同一个组件

2. 页面容器高度：如果 tabBar 固定定位，需要给页面内容添加 padding-bottom 避免遮挡

.page-container {
  padding-bottom: 100rpx; /* 根据 tabBar 高度调整 */
}

3. 路由跳转：手动放置后，uni.switchTab 仍然正常工作，无需额外处理

---

感谢阅读，下期更精彩 👋👋👋