app端实现图片铺满状态栏需设navigationstyle: "custom"和"titlenview": false,用var(--status-bar-height)控制容器高度与定位,禁用js获取状态栏高度,真机调试须用正式包。

图片要铺满到状态栏底部,核心不是“拉高图片”,而是让图片容器真正延伸进状态栏区域,并且不被原生导航栏或 padding 遮挡。这在 App 端(iOS/Android)可行,在小程序和 H5 则受限于平台能力。
必须先关掉原生导航栏
如果 pages.json 里没设 "navigationStyle": "custom",页面顶部会强制预留原生导航栏空间,哪怕你把图片 top 设为 0,它也只会贴在「导航栏下方」,永远到不了状态栏底边。
- 必须在目标页面的
style节点下单独配置,不能只写在globalStyle里(部分 Android 机型会忽略) - 配套加上
"app-plus": {"titleNView": false},否则某些厂商系统(如华为 EMUI、小米 HyperOS)仍会渲染一个透明但占位的 title 区域 - 微信小程序也支持
custom,但不支持状态栏透明,--status-bar-height值为 0,这部分样式需用#ifdef MP-WEIXIN屏蔽
用 --status-bar-height 控制容器高度,别用 JS 获取
uni.getSystemInfoSync().statusBarHeight 在 App 启动初期常返回 0 或错误值(尤其 Android),且 H5 小程序环境不兼容;而 CSS 变量 --status-bar-height 是 uni-app 运行时注入的,已适配刘海屏、挖孔屏、全面屏等所有场景。
- 给图片外层容器(比如
<view class="full-bg"></view>)加height: calc(100vh + var(--status-bar-height)); - 同时设
top: calc(-1 * var(--status-bar-height));,让容器上移,把状态栏区域“纳入”可绘制范围 - 若图片是
<image></image>标签,记得加width: 100%; height: 100%; object-fit: cover;,避免拉伸变形
图片底部留白?检查 vertical-align 和父容器 display
即使容器撑满,<image></image> 默认是 inline 元素,基线对齐(baseline)会在底部留下几像素空白——这不是状态栏问题,是行内元素渲染特性。
- 给
<image></image>加display: block;或vertical-align: bottom; - 如果父容器用了
flex或grid,确保没意外触发align-items: baseline类似行为 - 避免给图片父级加
transform、opacity、filter,这些会创建新层叠上下文,导致z-index或定位失效
最易忽略的一点:真机调试必须用正式打包的 IPA/APK,HBuilderX 模拟器不模拟原生窗口 flags,--status-bar-height 常为 0,测不出真实效果。很多“铺不满”其实是调试阶段误判。











