淘宝式沉浸式导航栏需三要素：页面内容顶至状态栏下、自定义导航栏背景透明、滚动时渐变显色；pages.json中须同时设"navigationStyle": "custom"和"app-plus": {"titleNView": false}，并用CSS变量--status-bar-height占位，监听onPageScroll实现渐变，下拉刷新时需动态禁用透明。
直接上结论：淘宝式沉浸式导航栏 = 页面内容顶到状态栏下方 + 自定义导航栏背景透明 + 滚动时渐变显色，三者缺一不可；只设 navigationStyle: "custom" 或只调 plus.navigator.setFullscreen(true) 都做不到。
pages.json 必须配对关闭原生导航栏
很多人卡在这一步：以为设了 navigationStyle: "custom" 就万事大吉，结果真机上还是有白条或错位。根本原因是没关掉原生 titleNView，尤其在 Android 厂商定制系统（如华为 EMUI、小米 HyperOS）上，会残留一个不可见的占位区域。
- 必须在目标页面的
style节点下同时写："navigationStyle": "custom"和"app-plus": {"titleNView": false} - 微信小程序端不支持
titleNView，但也不能漏掉条件编译——否则 H5 端会报错：#ifdef MP-WEIXIN包裹 App 端专属配置 - 千万别在全局
globalStyle里统一设navigationStyle，某些页面（比如登录页）可能需要原生返回按钮，强制 custom 会导致无法返回
用 CSS 变量 --status-bar-height 占位，别碰 uni.getSystemInfoSync()
在 onLoad 里调 uni.getSystemInfoSync().statusBarHeight 是最常见错误——此时 DOM 还没挂载，iOS 返回 0，Android 返回 24/25，刘海屏机型（如 iPhone 14 Pro）实际是 49px，硬编码或早读都不可靠。
- 根容器（如
<view class="page">）直接加：padding-top: var(--status-bar-height); - 这个变量由 uni-app 在 App 端运行时注入，已适配 iOS/Android 各类刘海、挖孔、水滴屏，比 JS 获取稳得多
- 微信小程序不支持该变量，值恒为 0，所以需用
#ifdef MP-WEIXIN绕过，或改用wx.getMenuButtonBoundingClientRect()算出胶囊高度后动态计算 - 如果用了
<uni-nav-bar>，必须显式设background-color="transparent"，它默认带白色背景
滚动渐变要监听 onPageScroll，不是 scroll-view 的 @scroll
淘宝首页那种“初始透明 → 下滑渐显蓝色”的效果，本质是监听整个页面滚动位置，而非某个局部区域。用 scroll-view 的事件会漏掉顶部吸顶前的过渡段，且在 iOS 上触发不及时。
- 在页面 script 中定义：
data() { return { scrollTop: 0, navbarBg: 'rgba(255,255,255,0)' } } - 使用生命周期钩子：
onPageScroll(e) { this.scrollTop = e.scrollTop; const opacity = Math.min(e.scrollTop / 80, 1); this.navbarBg = `rgba(255,255,255,${opacity})`; } - 绑定到自定义导航栏：
<view class="nav" :style="{ backgroundColor: navbarBg }"> - 注意：安卓部分机型（尤其 OPPO、vivo）
onPageScroll触发频率低，可加防抖（setTimeout清除重置），避免卡顿
下拉刷新时状态栏变黑？临时禁用透明是唯一解
开启 "enablePullDownRefresh": true 后，webview 整体下拉，透明导航栏下的内容就会直接顶进状态栏区域。这不是样式问题，而是原生层渲染顺序导致的——Android 系统把状态栏背景刷成黑色，iOS 则可能闪白。任何 z-index、transform、will-change 都无效。
- 正确做法是加状态隔离：
:class="{ 'nav-transparent': !isPulling }" - 在
onPullDownRefresh中设isPulling = true，在stopPullDownRefresh回调里设isPulling = false - 对应 CSS 写：
.nav-transparent { background-color: transparent !important; }，其他状态用实色兜底 - 真机调试务必用正式打包的 IPA/APK —— HBuilderX 模拟器不触发原生窗口 flags，测不出真实变黑现象
最容易被忽略的点：iOS 全面屏下状态栏高度是动态的（横竖屏切换时变化），而 --status-bar-height 会自动更新，但如果你手动用 JS 读取并存到 data 里，就不会响应变化。所以只要用 CSS 变量，就不用操心横屏适配。
