uni-app中实现导航栏滚动渐变透明需用onPageScroll监听scrollTop并线性插值计算alpha值，设fadeRange为80~120，取Math.max(0, scrollTop)防iOS负值，绑定navOpacity与navTextColor控制背景及文字颜色，避免使用createSelectorQuery或CSS滤镜确保性能与兼容性。
uni-app 中用 onPageScroll 监听滚动并控制导航条透明度
核心是利用页面滚动事件动态计算顶部导航栏的背景透明度，而不是依赖原生导航栏（uni-app 的 navigationStyle: custom 必须开启）。小红书那种「滑动一点就变半透，再滑变全 opaque」效果，本质是把 scrollTop 映射到 0 ~ 1 的 alpha 值。
常见错误是直接用 scrollTop 做判断阈值（比如 scrollTop > 100 ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)'），这样会突变，不渐变。正确做法是做线性插值：
- 设定一个「过渡区间」，例如
fadeRange = 120（从 0 滚到 120px 完成从全透到全不透） - 实际 alpha =
Math.min(1, scrollTop / fadeRange) - 在
onPageScroll里更新 data 中的navOpacity，然后绑定到导航栏的style="background-color: rgba(255,255,255, {{navOpacity}})"
注意：必须确保页面根容器是 <scroll-view> 或启用了 enablePullDownRefresh: false 的普通页面（uni-app 默认页面滚动由 WebView 自身处理，onPageScroll 才能触发）；如果用了 <scroll-view>，需手动设置 scroll-y 和高度，并禁用原生滚动。
为什么不能用 uni.createSelectorQuery() 获取元素位置来驱动渐变
有人想通过监听某个标题元素（如笔记正文顶部的 <view class="post-header">）距离顶部的距离来做渐变，这在 uni-app 里容易失效——因为 onPageScroll 触发时，createSelectorQuery 的 boundingClientRect 结果可能还没更新，尤其在 iOS 下延迟明显，导致 opacity 跳变或滞后。
更关键的是，小红书的效果依据的是「用户视觉上滑了多少」，不是某个 DOM 元素是否到达视口。直接用 scrollTop 最稳定、开销最低。
-
onPageScroll是系统级回调，毫秒级响应 - 而
createSelectorQuery是异步 API，每次调用都有微小延迟，叠加多次会导致卡顿 - 真机调试时，iOS 端频繁查 DOM 位置还可能触发重排，进一步拖慢滚动帧率
安卓和 iOS 在 onPageScroll 的 scrollTop 表现差异
同一个页面，在安卓上 scrollTop 从 0 开始递增；但在 iOS 上，如果页面有下拉刷新（enablePullDownRefresh: true），首次滚动前可能返回负值（比如 -45），这会导致 alpha 计算出负数，背景色异常（甚至变黑）。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
务必加兜底处理：
- 始终对
scrollTop取Math.max(0, scrollTop) - 过渡区间
fadeRange建议设为 80~120，太小（如 30）会让用户刚动手滑就满不透明，失去“渐进感”；太大（如 200）会让导航条迟迟不显形 - iOS 上若发现滚动开始时导航栏闪一下（先全透再渐变），大概率是页面 mounted 时未初始化
navOpacity = 0，需在data里默认设好
自定义导航栏里图标/文字颜色随背景明暗自动反色？
小红书导航条变白后，图标和标题文字会变成深色；全透时则用白色。uni-app 没有自动反色机制，得手动控制。最稳妥方式是把文字颜色也做成变量：
<view class="custom-nav" :style="'background-color: rgba(255,255,255,' + navOpacity + '); color:' + navTextColor"> <text class="nav-title">笔记详情</text> </view>
然后在 onPageScroll 里同步更新 navTextColor：
- 当
navOpacity < 0.5时设为'#fff' - 否则设为
'#333'
别用 CSS filter 或 mix-blend-mode，uni-app 多端兼容差，H5 可能生效，小程序里基本不认。
真正难的不是算透明度，而是让整个过程在低端安卓机上也不掉帧——所有计算必须在 onPageScroll 内完成，不要触发 setData 大量字段，只更新那两三个样式相关变量。
