custom: true 会彻底隐藏原生 tabbar 并取消其占位与交互,需删除 page.json 中 tabbar 配置;自定义 tabbar 需手动处理安全区、定位、z-index、状态管理及多端兼容。

custom: true 后原生 tabBar 消失是设计使然,不是 bug
uni-app 的 custom: true 本意就是「完全交出控制权」——它会隐藏系统原生 tabBar 区域,不保留占位、不响应点击、也不做安全区适配。你看到的“底部空白”或“凸起按钮被遮挡”,往往是因为 page.json 里仍留着默认 tabBar 配置,导致引擎悄悄撑开一个 50px 高度的不可见占位层。
- 必须删掉或注释掉
tabBar整个配置块,否则自定义层和残留占位会打架 -
custom: true是全局开关,对所有 tab 页面生效,不能只在某一页启用 - iOS 安全区(
env(safe-area-inset-bottom))不会自动作用于你的 div,得手动加padding-bottom: env(safe-area-inset-bottom)
凸起按钮必须用 absolute + fixed 组合定位
靠 margin 或 transform: translateY() 把中间按钮“顶起来”,在真机上极易错位:安卓不同机型 bottom 值不一致,iOS 安全区高度动态变化,且页面滚动时 fixed 元素可能意外跟随偏移。
- 整个自定义 tabBar 容器用
position: fixed; bottom: 0; left: 0; right: 0;锚定 - 凸起按钮单独抽离,用
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);居中上浮 - 凸起区域高度建议固定(如 60px),并确保父容器有足够
padding-bottom避免被截断 - 别忘了给凸起按钮加
z-index: 10,否则会被上层内容盖住
tab 点击状态和跳转必须手动接管
原生 tabBar 的高亮、禁用、页面跳转逻辑全部失效,uni.onTabItemTap 是唯一可靠入口,但它的回调只在用户点击 tabBar 项时触发——不包括你手写的凸起按钮。
- 所有 tab 页跳转统一走
uni.switchTab({url: '/pages/xxx'}),别混用uni.navigateTo - 当前激活项用
data或vuex/pinia存储,不要依赖 DOM class 切换 - 凸起按钮如果是独立功能(如发布),需单独绑定
@click,且内部不应调用switchTab(它不进 tabBar 栈) - 注意:H5 端
uni.onTabItemTap不触发,得额外监听路由变化或加 click 代理
鸿蒙和小程序平台要单独处理样式兼容
鸿蒙(HarmonyOS)对 env(safe-area-inset-bottom) 支持不稳定,部分版本返回 0;微信小程序里 fixed 在某些 iOS 微信版本下会“抖动”。这些都不是代码写错了,而是平台渲染机制差异。
- 鸿蒙端建议 fallback 到固定
padding-bottom: 34px(比常规多 4px),再用 JS 动态检测 safe-area - 小程序里凸起按钮推荐用
cover-view+cover-image替代普通 view,避免层级和点击穿透问题 - 所有图标资源优先用字体图标或内联 SVG,避免
image标签在不同平台缩放失真











