navigationBarHidden: true 仅对小程序和 H5 有效;APP 端必须用 navigationStyle: "custom" 配合 titleNView: false 才能真正移除原生导航栏,因其由原生容器控制,该配置被忽略。

直接说结论:navigationBarHidden: true 是最简单、跨端最稳的隐藏方式,但仅对小程序和 H5 有效;APP 端必须用 navigationStyle: "custom" 配合 titleNView: false 才能真正移除原生导航栏。
为什么 navigationBarHidden: true 在 APP 端无效
APP 端(iOS/Android)的导航栏由原生容器控制,navigationBarHidden 这个配置项在 APP 平台根本被忽略——它只存在于小程序和 H5 的 WebView 层逻辑中。如果你只写这一条,在真机调试时会发现 APP 端导航栏纹丝不动。
常见错误现象:
- pages.json 里写了
"navigationBarHidden": true,H5 和微信小程序正常隐藏,但 APP 端仍有白色/灰色导航栏 - 误以为是样式覆盖问题,疯狂加
page { margin-top: -44px },结果状态栏被遮挡或页面错位
正确做法是分平台声明:
{
"path": "pages/login/login",
"style": {
"navigationBarHidden": true,
"app-plus": {
"navigationStyle": "custom",
"titleNView": false
}
}
}
navigationStyle: "custom" 的真实含义
这个值不是“自定义样式”,而是“完全交出控制权”:UniApp 不再渲染任何原生导航栏,包括标题、返回按钮、胶囊按钮、下拉刷新触发区。你得自己用 拼一个顶部区域,并手动处理返回逻辑。
关键影响点:
- 所有页面级导航配置(如
navigationBarTitleText、navigationBarBackgroundColor)全部失效 - iPhone X 及以上机型需手动适配安全区域:
env(safe-area-inset-top)必须加到自定义导航栏的padding-top或top - 下拉刷新功能默认禁用,如需保留,必须显式设置
"enablePullDownRefresh": true并监听onPullDownRefresh
胶囊按钮(右上角微信按钮)怎么处理
即使设置了 navigationStyle: "custom",微信小程序仍会强制显示右侧胶囊按钮(带「…」的那个),且无法通过 CSS 隐藏。这不是 bug,是微信平台限制。
应对方案只有两个:
- 接受它存在,把自定义导航栏高度设为
44px(不含状态栏),并留出右侧空间,避免内容被遮挡 - 改用
transparentTitle: "always"(仅 APP 端支持),让原生导航栏变透明,再用自定义视图叠加其上——但这不适用于小程序
别试 display: none 或 opacity: 0 去盖住胶囊,微信会拦截 DOM 操作,且真机上无效。
动态控制导航栏显示/隐藏的坑
想在登录后隐藏、进入首页再显示?别依赖 setNavigationBarVisible ——它只在小程序中可用,H5 和 APP 端无此 API。
跨端兼容的动态方案只能靠路由跳转 + pages.json 分页配置:
- 登录页用独立 page 配置:
"navigationBarHidden": true+app-plus子项 - 登录成功后
uni.navigateTo跳转到已预设好导航栏样式的页面(如首页),而不是uni.reLaunch后强行重设 - 避免在
onLoad里调用this.$mp.page.$vm.$root.$mp.page.meta.setNavigationBarVisible,这个链路在 H5 下会报undefined
最易被忽略的一点:APP 端切换 navigationStyle 必须重启页面才生效,不能热更新。所以“点击按钮隐藏导航栏”这种交互,在 APP 上只能走页面跳转或整页重渲染。










