uni-app中状态栏无法直接设背景图，实际是通过custom导航栏+CSS变量覆盖实现；pages.json需在页面style节点配navigationStyle:"custom"；App端禁用titleNView才能保证自定义导航栏生效。
状态栏本身不能直接设背景图——它只是系统级的显示区域，uni-app 里所谓“给状态栏加背景图”，实际是通过自定义导航栏容器，把图片铺到 --status-bar-height 区域 + 导航栏整体高度上，视觉上“覆盖”状态栏。真机上没有 API 能单独操作状态栏背景，所有“状态栏背景图”都是 illusion。
pages.json 必须关掉原生导航栏
不设 "navigationStyle": "custom"，后续所有样式和 JS 控制都无效。这个配置要写在 pages.json 对应页面的 style 节点下，不是全局根节点：
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
}- 漏配会导致
--status-bar-heightCSS 变量为 undefined，height: var(--status-bar-height)失效 - 配在根
tabBar或h5节点下无效，必须是具体页面的style - App 端即使配了，titleNView 仍可能抢渲染权；若同时用了
titleNView，需确认其type为"transparent"或干脆禁用
用 CSS 变量 + padding-top 推出安全区域
别用 top: 0 + position: fixed 硬顶，iOS 上会盖住信号/时间，Android 上可能因 getSystemInfoSync().statusBarHeight 返回 0 而塌陷。正确姿势是靠 CSS 原生变量对齐：
.nav-container {
height: calc(var(--status-bar-height) + 44px);
padding-top: var(--status-bar-height);
background-image: url('/static/nav-bg.png');
background-size: 100% 100%;
}-
calc(var(--status-bar-height) + 44px)是总高（状态栏 + 导航栏内容区），44px 是常规导航栏内容高度 -
padding-top: var(--status-bar-height)把文字/图标往下推，留出状态栏位置，比margin-top更稳，不触发重排 - 图片路径必须是
/static/下的相对路径，~@/static/或@/static/在部分平台编译后失效
小程序端滚动时背景图联动透明度的坑
想实现“下拉渐显背景图”，不能只改 opacity：iOS 微信里 opacity 动画会让文字发虚，且无法单独控制图层混合。真正可用的是组合方案：
onPageScroll(e) {
const opacity = Math.min(1, e.scrollTop / 160);
this.$nextTick(() => {
this.navStyle = {
'background-image': `url('/static/nav-bg.png'), linear-gradient(rgba(0,0,0,${0.2 * opacity}), rgba(0,0,0,${0.2 * opacity}))`,
'background-size': '100% 100%, 100% 100%'
};
});
}- 用两层
background-image：底层图 + 上层渐变遮罩，避免图底噪点干扰文字 - 遮罩透明度随
scrollTop变化，0 → 0.2，而非 0 → 1，防止过曝 - 临界点选 160px 是经验值：太小（如 50px）导致手指刚动就满屏，太大（如 300px）则响应迟钝
-
$nextTick必须加，否则 style 更新不同步，滚动中出现闪跳
最易被忽略的一点：App 端用 titleNView.backgroundImage 虽然省事，但它和自定义导航栏是互斥的——一旦启用，你手写的 .nav-container 就会被原生层盖住，连 z-index 都无效。多端兼容方案只能放弃 App 原生能力，全程手写。
