根本原因是状态栏由系统原生控制，不属于dom渲染区；需设navigationstyle: "custom"获取控制权，再用page::before伪元素覆盖并设背景图，app端还需plus.navigator.setfullscreen(true)。
为什么状态栏背景图“卡在下面”不延伸？
根本原因是状态栏区域不属于页面 DOM 渲染区——它由系统原生控制，uni-app 默认不会把 background-image 绘制进去。即使你给 page 或根 view 设了背景图，只要没主动接管状态栏的视觉空间，图片就永远停在状态栏下方那条线。
常见错觉是“加了 padding-top: var(--status-bar-height) 就完事”，但这是为了内容不被遮挡；要让背景图“顶上去”，得先让容器真正覆盖到状态栏区域，再确保背景图能随容器拉伸渲染。
必须设 navigationStyle: "custom" 才有操作权
这是所有后续动作的前提。不设这个，titleNView: false、plus.navigator.setFullscreen(true) 全部失效——框架根本不给你交出控制权的机会。
-
pages.json中对应页面的style节点下必须写："navigationStyle": "custom" - 同时配套加：
"app-plus": { "titleNView": false }，否则某些 Android 机型（如华为 EMUI、小米 HyperOS）仍会偷偷渲染一个空白 title 区域，造成不可见的顶部留白 - 微信小程序端设了
navigationStyle: "custom"后，page元素会从 viewport 顶部开始布局，但此时若没自定义导航组件，顶部就是纯白——不是 bug，是框架按规范交出控制权后的表现
用 ::before 伪元素撑满状态栏区域
直接给 page 设背景图在 H5 和小程序中常无效，因为平台对 page 标签的样式支持极弱。最稳方案是：用固定定位的伪元素覆盖整个可视区，并把背景图挂上去。
在页面 <style></style> 中写：
page {
margin: 0;
padding: 0;
}
page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('~@/static/bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
注意：z-index: -1 确保它在内容层之下；~@/static/ 是 H5 和小程序都认的路径前缀，/static/ 在 H5 可能 404。
App 端还要调 plus.navigator.setFullscreen(true)
仅靠 CSS 无法真正隐藏状态栏本身——它还在那儿，只是背景图“看起来”延伸进去了。要让状态栏变透明、系统时间电量等信息消失，必须调原生 API。
- 必须包裹
#ifdef APP-PLUS，否则 H5 / 小程序运行时报plus is not defined - 必须在
onShow（或onLaunch）中调，不能放mounted——Vue 生命周期早于 plus 环境初始化，调了等于没调 - 调完后，状态栏区域真正透明，此时伪元素背景图才能完整呈现到屏幕最顶端
示例代码：
onShow() {
#ifdef APP-PLUS
plus.navigator.setFullscreen(true);
#endif
}
容易忽略的一点：iOS 上部分机型（尤其是带灵动岛的）状态栏高度动态变化，--status-bar-height 变量虽稳定，但伪元素高度是 100%，实际是否完全贴合顶部边缘，得看 page 是否被框架注入了其他内联 padding。真机测试时务必检查刘海区和底部圆角处是否有像素级错位。
