app端全屏隐藏导航栏需配置navigationstyle: "custom"和"titlenview: false",并调用plus.navigator.setfullscreen(true);状态栏适配用css变量--status-bar-height。

视频全屏时导航栏仍显示?先确认平台类型
小程序和 H5 端用 navigationBarHidden: true 就能解决;APP 端必须走原生控制路径,否则无论怎么调 CSS 或 Vue 生命周期都无效。真机调试发现导航栏还在,不是代码没写对,是根本没触发原生层隐藏逻辑。
APP 端必须设 navigationStyle: "custom" + titleNView: false
只写 navigationBarHidden: true 在 APP 平台被完全忽略——它只在小程序/H5 的 JS 层起作用。APP 的导航栏由 WebView 容器原生渲染,不交出控制权,前端无法干预。
-
navigationStyle: "custom"是开关,不是样式选项:设了才把顶部区域控制权还给前端 - 配套必须加
"app-plus": { "titleNView": false },否则 MIUI、HyperOS 等机型会在顶部留白 1px 或顶出内容 - 这两项要写在目标页面(比如 video.vue 对应的 pages.json 配置)的
style节点下,不能只写在globalStyle里
视频进入全屏后需手动调 plus.navigator.setFullscreen(true)
仅配置 navigationStyle 只移除了原生导航栏,状态栏还在。真正隐藏状态栏得靠 plus API,但它有硬性约束:
- 必须放在页面的
onShow钩子中调用,mounted或created会静默失败(plus 环境还没就绪) - 必须用
#ifdef APP-PLUS包裹,否则 H5 和小程序运行时报plus is not defined - 若还要隐藏底部虚拟导航键,可追加
plus.navigator.hideSystemNavigation(),但注意:小米 HyperOS、OPPO ColorOS 14+ 已禁用该接口,属系统限制
内容被顶上去或底部露黑边?别硬算 statusBarHeight
隐藏状态栏后,页面内容常上移或底部留空,这不是布局错,而是没适配系统变量变化。JS 获取的 uni.getSystemInfoSync().statusBarHeight 在 Android 上不准(尤其全面屏),iOS 返回像素值,H5 直接 undefined。
- UniApp 在 App 端注入了稳定 CSS 变量:
--status-bar-height,直接在根容器写padding-top: var(--status-bar-height); - 如果用了
<uni-nav-bar></uni-nav-bar>,记得设background-color="transparent",否则默认背景色会挡住状态栏区域 - 下拉刷新时内容穿透透明导航栏导致状态栏变黑?用
:class="{ 'nav-transparent': !isPulling }"配合onPullDownRefresh临时关闭透明
真正麻烦的不是代码怎么写,而是不同 Android 厂商对 hideSystemNavigation() 的支持已逐步收口——2026 年主流新系统基本不响应这个调用,这时候只能接受“状态栏隐藏但底部导航键保留”的事实,或者改用自定义原生插件绕过限制。











