记录微信小程序tabbar不显示问题：uni-app Vue 3 自定义 tabBar 不渲染
⚡⚡⚡ 欢迎预览，批评指正⚡⚡⚡
文章目录
- 1，问题描述
- 2，根本原因
- 3，解决方案：显式引入 + 手动放置
- 3.1，步骤 1：组件位置
- 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.vue3.1，步骤 2：修改每个 tabBar 页面
需要对以下 4 个文件做完全相同的修改：
pages/home/home.vue pages/points/points.vue pages/profile/profile.vue pages/upload/upload.vue修改内容
① 在
<script setup>importCustomTabBarfrom'@/custom-tab-bar/index.vue'// 其他 import...</script>② 在 中放置组件
<template><viewclass="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，注意事项
避免重复渲染：确保没有其他地方再次自动实例化同一个组件
页面容器高度：如果 tabBar 固定定位，需要给页面内容添加 padding-bottom 避免遮挡
.page-container{padding-bottom:100rpx;/* 根据 tabBar 高度调整 */}- 路由跳转：手动放置后，uni.switchTab 仍然正常工作，无需额外处理
感谢阅读，下期更精彩 👋👋👋