navigationstyle: "custom" 必须配合 titlenview: false 使用,否则页面内容会与状态栏重叠;需用 var(--status-bar-height) 动态设置 padding-top 或 height,真机调试必须使用正式包。

navigationStyle: "custom" 必须配 titleNView: false
不设这个组合,页面内容一定会和状态栏重叠。navigationStyle: "custom" 只是把导航栏控制权交还给前端,但原生层仍可能偷偷渲染一个空白 title 区域——尤其在华为、小米、OPPO 的定制系统上,这个区域看不见却占空间,导致内容被顶高或错位。
必须在 pages.json 中目标页面的 style 节点下同时写:
"navigationStyle": "custom""app-plus": { "titleNView": false }
H5 端不需要 titleNView,但也不能漏掉 navigationStyle: "custom",否则页面顶部默认有 44px 占位;微信小程序虽支持 custom,但不会注入 --status-bar-height,得用 #ifdef MP-WEIXIN 隔离相关样式。
padding-top 必须用 var(--status-bar-height),别碰 uni.getSystemInfoSync()
JS 获取的状态栏高度在 App 端极不稳定:iOS 返回真实像素(如 47),Android 常返回 24 或 25,全面屏机型可能动态变化;H5 和小程序环境直接返回 0 或 undefined。而 --status-bar-height 是 uni-app 在 App 启动时注入的 CSS 变量,已适配各厂商刘海/挖孔/折叠屏逻辑。
根容器(如 <page></page> 或最外层 <view></view>)样式中写:
padding-top: var(--status-bar-height);
如果自定义导航栏高度是 44px,就写:
height: calc(var(--status-bar-height) + 44px);不要写死
padding-top: 20px 或 44px,那在 iPhone 15 Pro Max 上必然重叠。
下拉刷新时内容穿透导致状态栏变黑?关透明就对了
开启 "enablePullDownRefresh": true 后,整个 webview 会被原生层下拉,而你设的 background-color: transparent 导航栏挡不住内容上涌——结果就是文字/图标直接怼进状态栏区域,Android 上常伴随闪烁或黑块。
这不是样式没写好,是原生渲染顺序问题。解法是行为隔离:
- 加响应式 class:
:class="{ 'nav-transparent': !isPulling }" -
onPullDownRefresh里设this.isPulling = true -
stopPullDownRefresh里设this.isPulling = false
对应 CSS 写:
.nav-transparent { background-color: transparent; }别试图用 z-index 或 transform 强行压住,无效。
真机调试必须用正式 IPA/APK,模拟器全是假象
HBuilderX 自带模拟器根本不触发原生窗口 flags 设置,--status-bar-height 渲染值常为 0 或固定 20,且状态栏隐藏逻辑(plus.navigator.setFullscreen(true))完全不执行。你在模拟器里调通了,真机一跑照样重叠。
每次验证沉浸效果前,务必:
- 打正式包(不是“运行到手机”那种热更新包)
- 在 iOS 真机上确认是否调用了
uni.setStatusBarStyle('light')切换文字颜色 - 在 Android 真机上检查是否漏写了
#ifdef APP-PLUS包裹plus.navigator.setFullscreen
最容易被忽略的是:状态栏重叠从来不是“样式没写对”,而是“控制权没交出去”或“占位没算准”。只要 navigationStyle 和 titleNView 没配齐、CSS 变量没用上、真机没测,就永远有重叠风险。











