uni-app如何实现全屏背景图穿透状态栏-uni-app-PHP中文网

必须先设置 navigationstyle: "custom"，否则后续样式无效；它在h5/app端移除导航栏dom，在小程序端强制启用自定义导航栏；需配合清除默认内外边距、干掉伪元素、动态适配状态栏高度及正确设置背景图。

uni-app如何实现全屏背景图穿透状态栏

navigationStyle: "custom" 是必须第一步

不设这个，后面所有样式调整都白搭。它在 H5 和 App 端真正移除导航栏 DOM 结构，让 page 元素从 viewport 顶部开始渲染；微信小程序端会强制启用自定义导航栏——没配组件就留白，但至少不会占位。

常见错误是只改 navigationBarTitleText 或 navigationBarBackgroundColor，这些只是改文字和颜色，容器还在，padding-top: 44px 这类内联样式照常注入。

在 pages.json 对应页面的 style 下加："navigationStyle": "custom"
App 端建议同步关原生导航栏："app-plus": { "titleNView": false }
微信小程序必须配套写一个自定义导航栏组件，否则顶部空白不可交互

清除 page 默认 margin/padding + 干掉伪元素占位

即使启用了 navigationStyle: "custom"，uni-app 仍可能注入 page::before 伪元素占位，且浏览器默认给 body 或 page 加 margin/padding（比如 Chrome 移动端默认 8px），叠加后背景图永远“卡”在状态栏下方。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

H5 必加全局样式：page { margin: 0; padding: 0; }
再加：page::before { display: none; }（精准干掉 uni-app 注入的占位伪元素）
不要用 * { margin: 0; padding: 0; }，会影响第三方组件内部布局

H5 端需动态适配状态栏高度

iOS Safari 支持 window.statusBarHeight，安卓 WebView 不支持，也不能直接 fallback 为固定值（刘海屏/非刘海屏、Chrome vs 微信内置浏览器行为不一）。

简单可靠做法：用 JS 获取并设置 document.documentElement.style.paddingTop

示例逻辑：

if (window.statusBarHeight !== undefined) {
  document.documentElement.style.paddingTop = window.statusBarHeight + 'px';
} else if (/Android/.test(navigator.userAgent)) {
  document.documentElement.style.paddingTop = '24px'; // 安卓常见状态栏高度
} else {
  document.documentElement.style.paddingTop = '0';
}

注意：该 JS 需在页面 onLoad 或 mounted 中执行，且确保 DOM 已 ready

背景图设置要避开 img 标签或 view 包裹

用 <image></image> 或嵌套 <view></view> 设置背景图，容易被父级 padding/margin 截断，或触发 flex 布局计算偏差；最稳方式是直接设在 page 或根 <view class="root"></view> 上。

推荐写法：

.root {
  width: 100vw;
  height: 100vh;
  background-image: url('/static/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

避免用 width: 100%; height: 100%;，在某些 H5 环境下会因父级未设高而失效
如果要用 <image></image>，必须设 mode="widthFix" 或 mode="aspectFill"，并配合 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;

实际最难缠的是 H5 在 iOS Safari 下的渲染时机问题：window.statusBarHeight 可能首次取不到，或 CSS 应用顺序导致闪动。真要稳定，得结合 DOMContentLoaded + setTimeout(..., 0) 双保险触发重绘，这点容易被忽略。