uni-app实现淘宝式商品详情页需用原生滚动+动态吸顶+区域锚点联动，避免swiper或scroll-view卡顿；通过createSelectorQuery精确获取区块位置，movable-area实现双指缩放，节流+区间映射同步导航锚点，cover-view解决iOS键盘遮挡。
uni-app 实现类似淘宝的商品详情页多屏滑动交互，核心不是靠 swiper 做简单轮播，而是用原生滚动 + 动态吸顶 + 区域锚点联动来模拟“分屏”效果。直接套用 scroll-view 或 swiper 都会卡顿、跳变、或无法精准控制吸顶时机。
scroll-view 滚动监听 + 区域高度计算不准
很多开发者一上来就给整个页面套 scroll-view，然后监听 @scroll 或 onPageScroll，但问题立刻暴露：
- 小程序里
scroll-view的scrollTop在 iOS 上有 10–20px 的误差，导致吸顶/切换判断偏移 - 各模块（轮播图、商品信息、参数、评价）高度是动态渲染的，
offsetTop不能在mounted就取准，必须等图片加载完、字体渲染完成后再测 - 手动计算每个区域 top 值再比对，代码冗长且易受
v-if、条件渲染影响
正确做法是：用 uni.createSelectorQuery() 在 onReady 后主动查询各区块位置，并缓存；滚动时只比对缓存值，不重复查 DOM。
示例关键逻辑：
const query = uni.createSelectorQuery().in(this);
query.selectAll('.section').boundingClientRect();
query.exec(res => {
this.sections = res[0] || [];
});
商品主图区域需支持双指缩放与滑动预览
淘宝详情页的首屏轮播图点击后进入的是可交互预览页，不是简单 uni.previewImage —— 后者不支持自定义 UI、无法定位当前索引、H5 端手势卡顿。
必须用 movable-area + movable-view 组合，但要注意几个硬约束：
-
movable-view的scale-value必须绑定到每张图独立的 scale 状态，不能共用一个变量 -
damping设为30左右才够顺滑，设太大拖拽发飘，太小回弹迟钝 - H5 端要加
touch-action: none到movable-view，否则和scroll-view手势冲突 - 双击放大需自己监听
tap事件并计时，不能依赖click（防误触）
导航锚点与滚动自动同步失效
顶部分类导航（如「商品」、「参数」、「评价」）点击跳转后，页面滚动到对应区块，但反过来——滚动时导航高亮不同步，常见原因有：
- 没监听
onPageScroll而监听了@scroll，后者在小程序中触发频率低且延迟高 - 判断高亮的阈值写死（如
scrollTop > 500），但不同机型、不同内容高度下临界点不同 - 未处理「滚动过快时连续触发多次」，导致
currentTab频繁重赋值，UI 抖动
推荐方案：用节流 + 区间映射。把页面总高度划分为 N 段，每段对应一个 tab，滚动时只判断落在哪一段，而不是比对绝对像素值。
例如：
const ratio = scrollTop / (pageHeight - window.innerHeight); const index = Math.min(Math.floor(ratio * this.tabs.length), this.tabs.length - 1); this.currentTab = index;
tabbar 与详情页滚动耦合导致 iOS 键盘遮挡
当用户在商品页底部点击「加入购物车」弹出键盘，iOS 小程序会自动上推整个 web-view，但若你用了 position: fixed 的 tabbar 或吸顶导航，它会脱离视口被推走，出现空白或错位。
解决方式不是加 safe-area-inset-bottom，而是：
- 禁用系统默认键盘顶起行为：
uni.setKeyboardOffset(0)（仅 App 端有效） - 小程序端改用
cover-view实现吸顶栏，它不受 webview 推动影响 - 输入框聚焦时，手动调用
scrollIntoView定位到操作区，避免被键盘盖住
真正难的不是实现某一个交互，而是让轮播、缩放、滚动吸顶、锚点联动、键盘适配这五件事在不同平台（微信小程序/H5/App）上同时稳定运行——它们各自生效的时机、触发条件、兼容性边界完全不同，必须拆开验证，不能指望一套逻辑通吃。
