onpagescroll 实现分层滚动视差需正确配置 disablescroll: false、精准获取 scrolltop、分段限幅计算位移、节流更新+translatez(0)优化渲染，并区分 ios/安卓差异处理。
直接用 onPageScroll 做分层滚动视差，90% 的坑都出在滚动源判断错误和位移计算失真上。商品详情页不是 Banner 页，不能套用“背景图 translateY * 0.3”这种简单公式——淘宝的分层响应本质是多个 DOM 节点对同一 scrollTop 做不同函数映射，且必须节流、限幅、防抖动。
为什么 scroll-view 的 bindscroll 在详情页里不适用
商品详情页通常整页滚动（非局部区域），scroll-view 会额外嵌套一层容器，导致：
-
bindscroll在 iOS 真机上延迟高、抖动明显，除非加enhanced="true"，但该属性仅 App 端生效，小程序无效 - 安卓低端机中，
scroll-view内部滚动触发bindscroll后，e.detail.scrollTop经常跳变或卡在 0 - 页面顶部有导航栏、TabBar 等固定元素时，
scroll-view高度难精确控制，视差元素错位风险极高 - 微信小程序里
scroll-view不支持will-change: transform，安卓闪屏问题无法缓解
onPageScroll 必须配 disableScroll: false 才能拿到真实 scrollTop
onPageScroll 默认不触发，因为 uni-app 页面默认禁用原生滚动。必须在 pages.json 对应页面配置中显式关闭：
"style": {
"disableScroll": false
}
否则即使写了 onPageScroll 方法，回调参数永远为空。常见错误是只在 JS 里写钩子，却忘了改 JSON 配置。
还要注意：onPageScroll 只监听根滚动容器，如果你把详情页包在 tabBar 或 subNVue 里，事件根本收不到；另外首次进入时 scrollTop 可能为 undefined，建议在 onReady 中补一次初始化读取。
分层位移怎么算才不飘、不抽搐
淘宝的分层逻辑不是线性缩放，而是分段映射 + 限幅 + 缓动。比如搜索框从透明到实色的过程，实际是：
- 0–50px：opacity 从 0.2 → 1，但用
Math.min(0.2 + scrollTop * 0.016, 1)而不是硬插值 - 分类入口淡入：在 50px 处开始，但用
Math.min((scrollTop - 50) * 0.02, 1)控制 opacity，避免过早全显 - Logo 缩小：只在 50–100px 区间变化，超出后锁定为 0.8 倍，防止无限缩小
- 所有 transform 位移必须加
translateZ(0)和will-change: transform，否则安卓 WebView 渲染帧率暴跌
别用 transition 控制视差动画——它会和滚动事件冲突，造成回弹抽搐；应该用 requestAnimationFrame 或节流（如 30ms）更新样式，且每次计算前做 Math.round(scrollTop) 消除浮点误差。
iOS 和安卓渲染差异必须单独处理
同一个 transform: translateY(-20px)，在 iOS WKWebView 和 Android system webview 中渲染精度不同，尤其在快速滚动时：
- iOS 上
scrollTop变化更平滑，但初始滚动可能延迟 1–2 帧，需加setTimeout(() => {}, 0)延迟首帧计算 - Android 低端机上
onPageScroll易丢帧，建议用throttle库节流到 30ms，并在computed中缓存上一帧结果，避免连续重绘 - H5 端可用
position: sticky做吸顶，但小程序和 App-vue 必须用position: fixed+ 占位 view，否则视差区域会随 TabBar 抽动 - 所有视差元素的父容器不能设
overflow: hidden，否则 iOS Safari 会裁掉部分 transform 区域
最易被忽略的是：淘宝效果里“弹性临界点”不是靠 CSS 动画实现的，而是滚动停止后用 setTimeout 触发一次微调，这个时机和幅度必须实测——不同机型的惯性滚动距离差 30–80px，硬编码会失效。
