不能只靠一个配置项,必须按平台区分处理:小程序和h5用navigationbarhidden: true或titlenview: false即可隐藏;app端必须同时设navigationstyle: "custom"和titlenview: false,否则会出现白条、遮挡或错位。

直接说结论:不能只靠一个配置项,必须按平台区分处理。小程序和 H5 用 navigationBarHidden: true 或 titleNView: false 就能干净隐藏;APP 端必须同时设 navigationStyle: "custom" 和 titleNView: false,否则必出白条、遮挡或错位。
小程序/H5 怎么关最简单
这两个平台支持 navigationBarHidden: true,写在页面 style 里即可生效:
- 微信小程序:顶部区域完全留空(但右上角胶囊按钮仍存在,无法移除)
- H5:隐藏 uni-app 渲染的 title 区域,不影响浏览器地址栏
- 值必须是布尔型
true,写成"true"字符串会静默失效 - 别和
navigationStyle: "custom"混用——后者优先级更高,会直接忽略navigationBarHidden
APP 端为什么单独写 navigationBarHidden: true 没用
因为 APP 端(iOS/Android)的导航栏由原生 WebView 容器控制,navigationBarHidden 这个字段压根不会被解析,只存在于小程序和 H5 的 JS 层逻辑中。
- 错误写法:
"navigationBarHidden": true单独出现在 APP 页面配置里 → 无效 - 正确写法:必须同时声明
"navigationStyle": "custom"和"titleNView": false -
navigationStyle: "custom"是“交出控制权”,不是“换个样式”;设了之后,返回键、下拉刷新触发区、标题渲染全部关闭 -
titleNView: false是补漏项:某些 Android 机型(如 MIUI/HyperOS)即使设了custom,仍会渲染空白 title 区域,造成 1px 白边或内容上移
去掉导航栏后内容被状态栏遮挡怎么办
尤其是小程序端,navigationStyle: "custom" 会让页面内容直接顶到屏幕最顶部,而状态栏(20–44px)就压在上面,第一行文字看不见是常态。
- 必须手动读取状态栏高度:
uni.getSystemInfoSync().statusBarHeight(H5 返回 0,小程序返回真实值) - 在页面最外层
<view></view>上加:style="{ paddingTop: statusBarHeight + 'px' }" - 更稳妥的做法是用 CSS 变量:
::root { --status-bar-height: env(safe-area-inset-top, 20px); },兼容 iOS 安全区 - 注意:APP 端如果还要隐藏系统状态栏和虚拟导航键,得调用
plus.navigator.setFullscreen(true),且必须放在onShow钩子中,并包裹#ifdef APP-PLUS
多端共存时怎么配才不打架
常见场景是 H5 要无导航、小程序/APP 保留原生导航。这时候不能全局设 navigationStyle: "custom",否则小程序必出视觉问题。
- 推荐方案:用条件编译,在
pages.json对应页面的style下写:"h5": { "titleNView": false } -
titleNView: false只影响 H5 和 APP,对小程序完全无感,不会导致白屏或状态栏遮挡 - 如果真要全平台统一隐藏,必须接受「所有端都自己实现顶部导航」的成本,包括状态栏适配、返回逻辑、安卓物理返回键拦截等
- 切记:同一页面的
style中不要同时出现titleNView和navigationStyle,前者会被后者覆盖
最易被忽略的点是:小程序端设了 custom 后,不处理状态栏高度,真机调试时根本看不出问题——因为开发者工具默认模拟了安全区域,而真机上第一行字就卡在信号图标下面。











