uni-app怎么实现类似淘宝详情页多规格加购弹窗动画交互

加购弹窗需深拷贝goodsData并用selectedSpecs数组存选中规格，点击时$nextTick校验库存；下拉动画用transform+absolute定位防卡顿；飞入动画须用uni.createSelectorQuery获取坐标并适配iOS状态栏偏移；多商品共用弹窗需key强制重建组件。

加购弹窗怎么动态显示规格数据并保持联动

弹窗里规格不更新、选了没反应，基本是因为数据没绑定或监听失效。关键不是“渲染出来”，而是“选中后能实时影响购物车数量和价格”。goodsData 必须是深拷贝后的结构，不能直接传接口原始响应；否则 v-model 或 @click 修改内部字段时，Vue 无法触发响应式更新。

• 规格列表用 v-for="(spec, idx) in goodsData.specs" 渲染，每个 spec.values 再套一层循环，避免扁平化拼接导致索引错乱
• 选中状态存成数组 selectedSpecs = ['颜色:红色', '尺寸:M']，而不是对象嵌套，方便后续查库存和组合 SKU
• 每次点击一个规格值，都要调用 this.$nextTick(() => { /* 检查当前组合是否可售 */ })，否则 DOM 还没更新，selectedSpecs 和界面不同步
• 库存判断逻辑必须放在 handleSpecClick 里：先过滤出所有匹配该组合的 skuList 项，再取 stock > 0 的最小值作为可选最大数量

为什么下拉选择动画卡顿或点不中

常见原因是用了 v-show 或 opacity 做显隐，但没配 transition 或没加 will-change: transform。iOS 微信里尤其明显——它对非 transform/opacity 的属性动画做软件渲染，一卡就是整秒。

• 下拉区域必须设 position: absolute，且父容器加 overflow: hidden，否则滚动时菜单会溢出
• 动画用 transform: scaleY(0) → scaleY(1)，配合 transform-origin: top，比 height 动画更稳
• 别在 @click 里直接写 dropShow = !dropShow，要包一层 this.$nextTick，否则 Vue 批量更新还没完成，getBoundingClientRect() 拿到的是旧高度
• 真机调试时发现点不中？检查是否被 z-index 更高的 tabBar 或自定义导航栏遮挡，把弹窗 z-index 设到 9999 并加 top: env(safe-area-inset-top)

飞入购物车动画为什么起点偏移、轨迹歪斜

不是贝塞尔曲线参数不对，而是坐标没减页面滚动偏移。uni-app 在 H5 和小程序里 pageYOffset 行为不一致，直接用 window.scrollY 会返回 0。

• 起点必须用 uni.createSelectorQuery().select('.add-btn').boundingClientRect()，不能用 ref + getBoundingClientRect()，后者在某些安卓 WebView 下返回错误值
• 终点（购物车图标）要加 id="cart-icon"，同样用 boundingClientRect() 查，查完立刻执行 exec() 回调，别等 $nextTick
• 计算位移时，x/y 都要减去 uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().screenHeight + scrollTop 这个偏移量，iOS 微信额外还要减掉 statusBarHeight
• 动画元素必须用 document.createElement('view') 动态创建，append 到 document.body，否则被 v-if 组件销毁时会中断动画

多商品共用一个弹窗时怎么避免数据污染

最典型的问题：点第一个商品弹窗，选好规格加购，再点第二个商品，弹窗里还是上一个商品的数据。这不是缓存问题，是组件复用没重置状态。

• 弹窗组件加 key，比如 :key="currentGoodsId"，强制 Vue 卸载重建实例
• 不要在弹窗组件 data() 里直接 return 共享的 goodsData 对象，改用 props 接收，并在 watch 里 deep clone 一次
• selectedSpecs 和 quantity 必须在 show 变为 true 时清空，否则用户上次选的还在
• 加购按钮的 ref 要动态绑定，比如 :ref="'addBtn' + goods.id"，不然多个按钮共用一个 ref 名，querySelector 只拿到第一个

实际项目里，最难缠的是 iOS 微信里 boundingClientRect() 返回的 y 坐标比真实值小 44px（状态栏高度），这个偏移得单独适配；还有 H5 端滚动时动画元素跟着抖动，必须给它加 position: fixed 而不是 absolute。这些细节不试真机根本发现不了。