pages.json 必须设 navigationstyle: "custom",且配套设置 "app-plus": {"titlenview": false},onshow 中调用 plus.navigator.setfullscreen(true) 才能真正隐藏状态栏,css 应使用 --status-bar-height 变量并配合条件编译。

pages.json 必须设 navigationStyle: "custom"
这不是可选项,而是所有沉浸式操作的硬性前提。不设这个,后续任何 JS 调用或 CSS 适配都无效——plus.navigator.setFullscreen(true) 不会起作用,--status-bar-height 变量也不会注入,页面仍按默认导航栏逻辑预留顶部空间。
必须写在目标页面的 style 节点下(不能只写在 globalStyle),且需配套设置:"app-plus": {"titleNView": false}。否则部分 Android 厂商系统(如华为 EMUI、小米 HyperOS)会在顶部渲染一个不可见的空白 title 区域,造成真实留白却查不到原因。
onShow 中调 plus.navigator.setFullscreen(true)
这个 API 才是真正触发状态栏隐藏的关键动作,但它有三个强约束:
-
#ifdef APP-PLUS包裹,否则 H5 和小程序环境运行时报plus is not defined - 只能在
onShow或onLaunch中调用;放在mounted或created里会静默失败,因为此时 plus 环境尚未就绪 - 单独调它只隐藏状态栏;若还需隐藏底部虚拟导航键,得额外加
plus.navigator.hideSystemNavigation(),但注意该方法在 OPPO ColorOS 14+、小米 HyperOS 等新系统上已失效,属系统级限制
CSS 用 --status-bar-height 占位,别信 uni.getSystemInfoSync()
--status-bar-height 是 uni-app 在 App 端运行时注入的 CSS 变量,已适配 iOS/Android 各类刘海屏、挖孔屏和全面屏,比 JS 获取稳定得多。JS 的 statusBarHeight 在 Android 上常返回固定值(24/25px),全面屏机型可能不准;iOS 返回真实像素;而 H5 和小程序环境直接不返回该字段。
正确做法是:
- 根容器加
padding-top: var(--status-bar-height); - 若用
<uni-nav-bar></uni-nav-bar>,必须显式设background-color="transparent",否则默认背景色会挡住状态栏区域 - 下拉刷新时内容会穿透透明导航栏,导致状态栏变黑——此时应临时禁用透明,比如用
:class="{ 'nav-transparent': !isPulling }配合onPullDownRefresh和stopPullDownRefresh控制
真机调试必须用正式打包的 APK/IPA
HBuilderX 自带模拟器对 --status-bar-height 渲染不准,也不触发原生窗口 flags 设置,测不出真实沉浸效果。很多“全屏失败”其实是调试阶段误判。尤其注意:小米、OPPO、vivo 等厂商定制系统对 setFullscreen 的响应有延迟或条件限制,正式包 + 真机才能验证是否生效。
最容易被忽略的一点是:状态栏高度变量只在 navigationStyle: "custom" 生效后才注入,且仅限 App 端;其他平台该变量值为 0 或未定义,写样式时务必用条件编译隔离。











