app端需组合 navigationstyle: "custom" + titlenview: false 才能隐藏导航栏;小程序/h5用 navigationbarhidden: true 即可;全屏还需 plus.navigator.setfullscreen(true) 并手动处理安全区。

不能只写 navigationBarHidden: true —— 它在 APP 端完全无效,真机调试时导航栏还在,不是样式没生效,是压根没进原生渲染流程。
小程序和 H5:用 navigationBarHidden: true 最稳
这两个平台直接支持该字段,写在页面 style 里即可生效:
- 微信小程序:顶部区域完全留空(但右上角胶囊按钮仍存在,无法移除)
- H5:隐藏 UniApp 渲染的 title 区域,不影响浏览器地址栏(地址栏不属于 uni-app 控制范围)
- 值必须是布尔型
true,写成"true"(字符串)会静默失效 - 不要和
navigationStyle: "custom"混用——后者一设,navigationBarHidden就被忽略
APP 端:必须组合 navigationStyle: "custom" + titleNView: false
APP 的导航栏由原生 WebView 容器控制,navigationBarHidden 这个字段在 APP 平台根本不解析。只写它,等于没写。
-
navigationStyle: "custom"是“交出控制权”,不是“换个样式”;设了之后,原生返回键、标题、下拉刷新触发区全部失效 -
titleNView: false是补漏项:某些 Android 机型(如 MIUI/HyperOS)即使设了custom,仍会渲染一个空白 title 区域,导致顶部 1px 白边或内容上移 - 配置必须放在
pages.json对应页面的style下,例如:{"path": "pages/video/index", "style": {"navigationStyle": "custom", "app-plus": {"titleNView": false}}}
APP 全屏还要隐藏状态栏?必须用 plus.navigator.setFullscreen(true)
去掉原生导航栏只是第一步,真正的沉浸式需要连系统 UI 也收掉,但这有严格限制:
- 必须放在
onShow(不是mounted或onLoad)—— Vue 生命周期早于 plus 环境就绪,提前调用会报plus is not defined - 必须包裹
#ifdef APP-PLUS,否则 H5 和小程序运行时报错 -
plus.navigator.setFullscreen(true)只隐藏状态栏;如需隐藏底部虚拟导航键,得额外加plus.navigator.hideSystemNavigation() - 注意:
hideSystemNavigation()在部分 Android 12+ 厂商系统(如小米 HyperOS)已失效,属于系统级限制,代码再对也没用
隐藏后内容被状态栏遮挡?尤其是小程序端
一旦用了 navigationStyle: "custom",小程序会把内容顶到屏幕最顶部,不预留状态栏空间,结果就是第一行文字被时间、信号图标盖住。
- 这不是 bug,是机制:小程序没有自动适配状态栏高度的逻辑
- 解决方案是手动加内边距:
padding-top: env(safe-area-inset-top)或constant(safe-area-inset-top) - 别用
margin-top: -44px这类硬编码,不同设备状态栏高度不同,iOS 和安卓也不一致 - 如果同时用了自定义导航栏组件,记得给它也预留安全区,否则自定义标题也会被遮











