App端实现沉浸式状态栏需三步:pages.json设navigationStyle:"custom"、onShow中调plus.navigator.setFullscreen(true)、用--status-bar-height适配布局,缺一不可。

App端实现沉浸式状态栏,不是“设个样式就完事”,而是三步缺一不可:交出控制权、隐藏原生层、适配内容布局。少一步,页面顶部就会留白、变黑或错位。
pages.json 必须设 navigationStyle: "custom"
这是整个流程的开关,不是可选项。不写这行,后面所有 JS 调用都无效——plus.navigator.setFullscreen(true) 会静默失败,--status-bar-height 变量也不会注入。
- 必须写在目标页面的
style节点下(不能只写在globalStyle),否则子页面不生效 - 配套加上
"app-plus": {"titleNView": false},否则部分 Android 厂商系统(如小米 HyperOS、vivo OriginOS)会在顶部渲染一个不可见的空白 title 区域,导致实际内容被往下顶 24–44px - 微信小程序也认
custom,但不支持状态栏透明;H5 端设了也没用,--status-bar-height值恒为 0
onShow 中调 plus.navigator.setFullscreen(true)
这个 API 才是真正触发状态栏隐藏的关键动作,但它有严格时机要求:只能在 onShow 或 onLaunch 里调,不能放 mounted 或 created——Vue 生命周期早于 plus 环境就绪,调了等于没调。
- 必须包裹在
#ifdef APP-PLUS条件编译里,否则 H5 和小程序运行时报错 - 单独调它只隐藏状态栏;若还想隐藏底部虚拟导航键,得额外加
plus.navigator.hideSystemNavigation(),但注意:该方法在 OPPO ColorOS 14+、小米 HyperOS 等新系统上已被系统禁用,调了也无效 - 横屏场景需在
manifest.json的orientation里声明方向,并在onLaunch中调plus.screen.lockOrientation("landscape")
用 --status-bar-height 而不是 uni.getSystemInfoSync().statusBarHeight
JS 获取的高度在不同平台差异极大:iOS 返回真实像素,Android 多数返回固定 24/25,全面屏机型可能不准,H5 和小程序直接返回 undefined。而 --status-bar-height 是 uni-app 在 App 端运行时注入的 CSS 变量,已适配各厂商刘海屏、挖孔屏、折叠屏。
- 根容器加
padding-top: var(--status-bar-height);,别用固定值(如20px)或 JS 计算后写内联样式 - 如果用了
,必须显式设background-color="transparent",否则默认背景色会挡住状态栏区域 - 下拉刷新时内容会穿透透明导航栏,导致状态栏变黑——此时应临时禁用透明,例如用
:class="{ 'nav-transparent': !isPulling }",并在onPullDownRefresh和stopPullDownRefresh中切换isPulling状态
真机调试必须用正式打包的 IPA/APK,HBuilderX 自带模拟器对 --status-bar-height 渲染不准,也不触发原生窗口 flags 设置,很多“没效果”其实是误判。











