必须设 navigationStyle: "custom" 才能交还导航栏控制权，配套 app-plus: { titleNView: false } 防安卓留白，H5/小程序需清边距和伪元素，背景图需 fixed 容器+cover，状态栏用 --status-bar-height 适配。
pages.json 必须设 navigationStyle: "custom"
不设这个，后面所有操作都白搭。它不是“美化选项”，而是把原生导航栏控制权交还给前端的开关。只改 navigationBarTitleText 或 titleNView: false 都无效——前者在 App 平台被忽略，后者只关原生层绘制，但逻辑上导航栏上下文还在，页面仍会预留空间。
必须在目标页面的 style 节点下写：
"navigationStyle": "custom"
同时配套加：
"app-plus": { "titleNView": false }
否则部分 Android 机型（尤其厂商定制系统）会在顶部渲染一个空白 title 区域，造成不可见的留白。
H5 和小程序端要手动清空 page 默认边距
即使设了 navigationStyle: "custom"，H5 端仍可能因浏览器默认样式或框架注入伪元素导致顶部/底部留白。
- 在页面级
<style>中加：page { margin: 0; padding: 0; } - 再加一句干掉 uni-app 注入的占位伪元素：
page::before { display: none; } - 微信小程序若没配自定义导航组件，顶部会真成白板——必须自己写一个
<view class="custom-nav">并用position: fixed; top: 0;覆盖
背景图全屏的关键是容器撑满 + background-size: cover
背景图不铺满，往往不是图片问题，而是容器没占满视口。不能只靠 page 样式，得用一个根 <view> 容器主动撑开：
<view class="full-bg" :style="{ backgroundImage: 'url(' + bgUrl + ')' }"></view>
对应 CSS：
.full-bg {<br> position: fixed;<br> top: 0;<br> left: 0;<br> width: 100vw;<br> height: 100vh;<br> background-size: cover;<br> background-repeat: no-repeat;<br> background-position: center center;<br>}
注意：background-image 的 URL 必须是静态资源路径（如 /static/bg.jpg），动态变量需确保已加载完成；H5 端若用 uni.getImageInfo 加载网络图，得等 onload 后再设 style，否则闪白。
状态栏区域要主动适配，别依赖 JS 获取高度
隐藏导航栏后，状态栏区域常被内容顶穿或遮挡。JS 的 uni.getSystemInfoSync().statusBarHeight 在不同平台返回值极不稳定（iOS 返回真实像素，Android 常固定 24/25，全面屏机型不准），且 H5 和小程序环境直接不返回。
uni-app 在 App 端注入了可靠的 CSS 变量：--status-bar-height。直接在自定义导航栏容器上用：
.custom-nav {<br> height: calc(var(--status-bar-height) + 44px);<br> padding-top: var(--status-bar-height);<br>}
微信小程序则需用 wx.getMenuButtonBoundingClientRect() 算胶囊按钮位置，结合 statusBarHeight 手动算出导航栏总高——这个计算必须在 onLoad 里做，不能放 mounted，否则拿不到胶囊数据。
最易被忽略的一点：全屏背景和自定义导航栏是两件事。背景图负责视觉填充，导航栏负责交互与状态适配；二者高度、定位、z-index 都得独立控制，混在一起写容易互相覆盖或错位。尤其是下拉刷新时，透明导航栏会让内容穿透到状态栏区域变黑，得用 :class 动态切背景色。
