不能用uni.pageScrollTo做锚点跳转，因其在scroll-view嵌套、自定义头部等结构下原生页面滚动上下文丢失，微信小程序静默失败、H5端与fixed导航冲突；必须改用scroll-view的scroll-into-view或手动控制scrollTop。

直接用 scroll-view 包整个详情内容，配合 onPageScroll 做滚动监听和视差，是当前最稳、跨端兼容性最好的方案。别迷信 uni.pageScrollTo，它在多数详情页结构里根本不起作用。

为什么不能用 uni.pageScrollTo 做锚点跳转

详情页通常有固定导航栏、scroll-view 嵌套、自定义头部等结构，导致原生 滚动上下文丢失。微信小程序静默失败，H5 端 fallback 到 document.body 后又和 position: fixed 导航冲突，目标元素常被遮挡。只要页面根节点不是纯原生 （比如你加了 scroll-view 或 swiper），uni.pageScrollTo 就大概率失效。

必须改用 scroll-view 自身的 scroll-into-view 属性或手动控制 scrollTop。关键点：

• scroll-view 必须设显式高度，例如 style="height: calc(100vh - 100rpx)"
• 禁用节流：:throttle="false"，否则 @scroll 回调延迟严重，导航高亮不同步
• 所有锚点区块（如 ）必须是 scroll-view 的子元素，不能在外层再套容器

怎么用 onPageScroll 实现视差与吸顶导航

onPageScroll 是页面级原生钩子，精度高、延迟低，比 bindscroll 可靠得多。淘宝式分层响应（模糊→半透→实色）必须靠它驱动。

常见错误是直接用 scrollTop * 0.5 算位移，结果一滑就“飘”，松手回弹抽搐。正确做法是分段限幅：

• 头部 banner 位移控制在 -60px ~ 0px：用 Math.max(Math.min(-scrollTop * 0.3, 0), -60)
• 商品图缩放限制在 1.0 ~ 1.15 倍，避免失真
• 透明度变化范围建议 0.7 ~ 1.0，别让文字突然消失
• 所有 transform 动态计算后加 translateZ(0) 和 will-change: transform，尤其安卓 WebView 必加，否则闪屏

底部 SKU 弹窗怎么避免卡顿和动画失效

uni-popup 的 mode="bottom" 动画失效，90% 是父容器干扰导致。它依赖 transform: translateY()，一旦父级有 overflow: hidden、transform、position: fixed，动画就会被截断或错位。

淘宝客全能工具箱

提供淘宝、京东、拼多多商品链接转链、跨平台比价、一键价保及佣金追踪的实用工具箱。

下载

正确结构必须满足：

• 的**直接父元素只能是单个 **，且该 不能有任何干扰样式
• SKU 内容区要设固定高度（如 height="600rpx"），内部用 包裹规格列表，别用 height: auto
• 关闭弹窗必须监听 @close 事件，而不是直接赋值 show = false——否则动画未完成就销毁 DOM，视觉上像“闪退”
• 微信小程序真机需手动适配安全区：top: env(safe-area-inset-top)，否则弹窗顶部被状态栏遮挡

商品分级展示怎么组织数据才不卡顿

订单详情页常见的“店铺分组 → 商品 → SKU”三级结构，如果 flat 渲染或嵌套过深，真机滑动会明显掉帧。核心是控制渲染粒度和资源加载时机。

数据结构推荐用嵌套数组：order.items 是一级分组（按 shop_id 聚合），每个 item 再带 skus 数组。关键避坑点：

• 外层只用一个 ，禁止内部再套 scroll-view —— 分组间用 + margin-bottom 隔开即可
• 所有 必须加 lazy-load="true"，且 src 不能为空字符串（空图占位用 /static/images/placeholder.png）
• 点击跳转到某 SKU 时，不要用 uni.navigateTo 开新页，而是手动计算该 SKU 在 scroll-view 中的 offsetTop，再用 scrollTop 滚动过去

最易被忽略的是：所有 boundingClientRect() 查询必须在 onReady 或 $nextTick 后执行，否则 DOM 还没渲染完成，拿到的坐标全是 0。