必须同时设置 navigationStyle: "custom" 和 titleNView: false 才能稳定隐藏导航栏;单独配置任一参数均可能导致小程序内容被遮挡、APP 无效或 Android 白边等问题。

不能只写 navigationBarHidden: true,否则 H5 和小程序可能生效,APP 端完全无效;也不能只配 navigationStyle: "custom" 就完事,否则小程序内容会被状态栏遮挡、Android 机型可能残留白边。
小程序和 H5 怎么关最稳?用 navigationBarHidden: true
这个配置只对小程序和 H5 生效,APP 端压根不识别它——别被文档里“全局样式”误导了。
- 必须写在页面级
style里(pages.json中对应页面的style字段),不能只塞在globalStyle里 - 值必须是布尔型
true,写成"true"字符串会静默失效 - 微信小程序下:顶部区域清空,但右上角胶囊按钮(信号/时间那块)仍存在,无法移除
- H5 下:只隐藏 uni-app 渲染的 title 区域,不影响浏览器地址栏(地址栏不属于 uni-app 控制范围)
APP 端为什么 navigationBarHidden: true 没反应?
因为 APP 端(iOS/Android)的导航栏由原生 WebView 容器控制,navigationBarHidden 这个字段根本不会被原生层解析。真机调试时看到导航栏还在,不是你配错了,是它压根没进渲染流程。
- 正确写法:必须同时设
"navigationStyle": "custom"和"titleNView": false -
navigationStyle: "custom"是交出控制权,不是换皮肤;设了之后,返回键、下拉刷新触发区、标题渲染全部关闭 -
titleNView: false是补漏项:某些 Android 机型(尤其 MIUI/HyperOS)即使开了custom,仍会渲染一个空白 title 区域,造成顶部 1px 白边或内容上移 - 二者缺一不可,单独配任一个都可能出错
去掉导航栏后,内容被状态栏盖住怎么办?
这是最常踩的坑:尤其是小程序端,navigationStyle: "custom" 一开,页面就从 y=0 开始画,而状态栏(20–44px 高)直接压在上面。
- 必须手动加顶部留白:
uni.getSystemInfoSync().statusBarHeight拿高度(H5 返回 0,小程序/APP 返回真实值) - 在页面最外层
<view>上加:style="{ paddingTop: statusBarHeight + 'px' }" - 更稳妥的做法是用 CSS 变量:
::root { --status-bar-height: env(safe-area-inset-top, 20px); },兼容 iOS 安全区 - 注意:不要用
navigationStyle: "custom"+navigationBarHidden: true混用,前者优先级更高,后者会被忽略
只想在 H5/APP 隐藏,又不想动小程序?用 titleNView: false
这个配置绕过小程序限制,只影响 H5 和 APP,副作用小,也不用额外算状态栏高度。
- 写在页面
style里,或globalStyle中均可(如仅 H5/APP 全局隐藏) - APP 端设了
titleNView: false后,你得自己实现顶部导航(比如用<view class="custom-nav">) - 小程序端完全不受影响,
titleNView对它无效,所以不会白屏、也不会遮挡 - 和
navigationStyle: "custom"不能混用在同一页面,否则行为不可控
真正麻烦的从来不是“怎么关”,而是关掉之后要不要自定义、要不要适配状态栏、要不要处理不同平台的白边或胶囊按钮。很多问题不是配置错了,是关了导航栏却忘了页面已经失去默认占位——它不会自动帮你腾地方。


















