uni-app实现原生导航栏背景图的唯一可靠方案是使用自定义导航栏，需全局或单页关闭原生导航栏（navigationStyle: "custom"），通过wx.getMenuButtonBoundingClientRect()获取胶囊按钮位置动态计算高度，并用background-size: cover和绝对路径背景图精准适配。
uni-app 无法直接给原生导航栏设置 backgroundImage，必须用自定义导航栏 + 精确高度控制 + 图片定位来实现。这是唯一可靠方案，其他方式（比如只改 navigationBarBackgroundColor）压根不支持图片。
pages.json 中必须关闭原生导航栏
否则自定义的 view 会和原生导航栏重叠或错位，尤其在微信小程序里表现混乱。
- 全局禁用：
"globalStyle": {"navigationStyle": "custom"} - 单页禁用：在对应页面的
style对象里加"navigationStyle": "custom" - 注意：
navigationStyle: "custom"后，原生标题、返回按钮、胶囊按钮全部消失，全靠你手写
自定义导航栏要适配胶囊按钮位置
微信小程序顶部有“胶囊按钮”（右上角那个方形按钮），自定义导航栏必须和它对齐，否则视觉割裂感极强。
- 用
wx.getMenuButtonBoundingClientRect()获取胶囊位置（仅小程序有效） - 计算导航栏总高度：
barHeight = capsule.top - statusBarHeight + capsule.height - 状态栏高度用
uni.getSystemInfoSync().statusBarHeight - 模板中用两个嵌套
view：外层占满状态栏+导航栏高度，内层仅占导航栏内容区（即去掉状态栏那部分）
背景图要铺满且不拉伸变形
直接写 background-image 很容易被裁切、重复或模糊，关键在单位和尺寸控制。
- 图片路径推荐用绝对路径：
url('@/static/nav-bg.png')，避免相对路径在不同平台解析失败 - 必须设
background-size: cover，不是100% 100%（后者会强行拉伸） - 设
background-position: center center，确保焦点居中 - 高度必须用动态计算值（如
:style="{ height: barHeight + 'px' }"），不能写死100rpx，否则在 iPhone X / 折叠屏等设备上错位
页面主体内容要避开导航栏遮挡
自定义导航栏是绝对定位或普通流式布局，但页面内容默认从顶部开始，极易被盖住。
- 最稳妥做法：给页面根
view加:style="{ paddingTop: barHeight + 'px' }" - 不要依赖
padding-top: env(safe-area-inset-top)，iOS 和鸿蒙行为不一致 - 如果用了
scroll-view，需额外设style="height: calc(100vh - {{barHeight}}px)"，否则滚动区域异常 - 测试时务必真机跑 iOS 和 Android，模拟器常忽略状态栏高度差异
真正麻烦的不是写几行样式，而是胶囊位置计算、状态栏兼容、图片加载时机这三者叠加——任一环节漏掉，背景图就会偏移、裁切或闪动。别图省事硬套网上“一行代码搞定”的方案，那基本是 demo 级别的玩具代码。
