应使用 onPageScroll 监听滚动位置，它每帧返回 { scrollTop: number }，单位 px；注意仅页面级组件生效，需节流处理避免卡顿，并用 scrollTop 计算导航栏背景透明度。
监听页面滚动事件用 onPageScroll 而不是 onReachBottom
很多人误以为 onReachBottom 或 onPullDownRefresh 能捕获滚动位置，其实它们只触发边界动作。真正监听滚动偏移量，必须用 onPageScroll —— 它每帧都会回调一个 { scrollTop: number } 对象。
注意：该生命周期仅在页面级组件（即 pages.json 注册的页面）中生效，vue 子组件需通过 $parent 或事件透传获取；H5 端默认可用，但小程序端需确保页面根容器是 scroll-view 或原生滚动容器（如未包裹 scroll-view，iOS 微信可能不触发）。
-
onPageScroll的scrollTop单位是 px，从 0 开始递增 - 真机调试时，部分安卓机型存在节流（约 16ms～60ms 一次），别依赖高频精确值
- 不要在回调里直接调用
this.setData（小程序）或this.$forceUpdate()（H5），应节流 + 合并状态更新
计算导航栏背景透明度用 scrollTop 做线性映射
渐变本质是把滚动距离映射为颜色通道值。常见做法是设定一个阈值（比如 100px），超过后完全不透明；未达阈值时按比例插值：
const opacity = Math.min(1, scrollTop / 100)
这个值可直接用于 rgba(0, 0, 0, ${opacity}) 或控制 background-color 的 alpha 通道。但要注意：
- 不要用
scrollTop直接设opacity属性——导航栏通常是 fixed 元素，其透明度和背景色需分开处理 - 微信小程序自定义导航栏（
navigationStyle: custom）下，uni-app不接管状态栏颜色，需手动调用uni.setNavigationBarColor，但它不支持透明度，只能切换预设色值 - H5 和 App 端推荐用 CSS 变量 +
style绑定，例如：:style="{ backgroundColor: `rgba(255, 255, 255, ${navBgAlpha})` }"
避免频繁重绘导致卡顿：加防抖 + 缓存计算结果
onPageScroll 触发非常频繁，直接响应会导致样式反复计算、Vue 响应式系统压力大，尤其低端安卓机容易掉帧。
推荐做法是用时间戳简单节流（无需引入 lodash）：
let lastTime = 0
onPageScroll(e) {
const now = Date.now()
if (now - lastTime < 16) return // 约 60fps
lastTime = now
const opacity = Math.min(1, e.scrollTop / 100)
this.navBgAlpha = opacity
}
更稳妥的方式是用 requestAnimationFrame 批量读写，但对多数场景，上述节流已足够。另外注意：
- 别在
onPageScroll里执行 DOM 查询（如uni.createSelectorQuery），它本身开销大 - 如果导航栏含文字或图标，建议只改背景，文字颜色用固定高对比度（如深色背景配白色字），避免同时过渡文字色造成闪烁
- App 端使用 nvue 时，
onPageScroll不触发，需改用scrolltoupper+scrolltolower配合ref获取scroll-view的scrollTop
小程序自定义导航栏下无法动态改色？换用 uni.setNavigationBarColor 分段切换
微信/支付宝小程序的原生导航栏不支持 rgba，uni.setNavigationBarColor 只接受十六进制颜色字符串（如 #ffffff），所以无法真正“渐变”，只能做分段模拟：
if (e.scrollTop < 50) {
uni.setNavigationBarColor({ backgroundColor: '#ffffff00' }) // 实际无效，忽略
} else if (e.scrollTop < 100) {
uni.setNavigationBarColor({ backgroundColor: '#ffffff80' }) // 小程序不识别带 alpha 的 hex
} else {
uni.setNavigationBarColor({ backgroundColor: '#ffffff' })
}
上面写法无效——小程序只认 6 位或 3 位 hex。正确做法是预设几档纯色：
scrollTop → <code>#ffffff00（实际用transparent覆盖一层 view，原生导航栏隐藏）50 ≤ scrollTop → <code>#f8f8f8-
≥ 100→#ffffff
也就是说：真要渐变效果，必须放弃原生导航栏，用自定义 view 模拟，并通过 position: fixed + z-index 控制层级。这也是大多数上线项目的实际选择。
最易被忽略的一点：nvue 页面里没有 onPageScroll，且 scroll-view 的 bindscroll 回调参数是 { detail: { scrollTop } }，结构不同，容易漏解构。
