uni-app图片放大镜核心是双图层+touch坐标映射：底层原图、上层圆形蒙版，通过clientX/Y减容器offset再除缩放比得原图坐标，禁用catchtouchmove，用absolute布局保getBoundingClientRect准确。
uni-app 中用 touchmove 实现图片放大镜效果的关键逻辑
原生 canvas 或第三方库在 uni-app 里跨端兼容性差，真正能稳定跑通的方案是「双图层 + touch 坐标映射」：底层显示原图（缩放后），上层蒙版裁出圆形放大区域，再把对应位置的高清图（或原图缩放后）平移过去。核心不是“放大”，而是“坐标对齐”。
常见错误是直接对 image 组件加 scale 样式，结果 iOS 上 touch 坐标偏移、安卓上卡顿、小程序里 canvas 渲染错位——这些都不是 bug，是渲染层和事件层分离导致的必然现象。
- 必须用
position: absolute布局两层图片，避免 flex 或 scale 影响getBoundingClientRect()计算 - 监听
touchstart和touchmove，禁用catchtouchmove，否则 H5 端会触发页面滚动 - 计算放大区中心点时，要用
event.touches[0].clientX/Y减去容器左上角 offset，再除以缩放比例，才是原图坐标 - 放大倍数建议控制在 2–3 倍，超过 3 倍在低端安卓机上会出现 canvas 绘制模糊或内存溢出
uni-app 图片联动缩放：主图与小图同步滚动的实现要点
京东式商品页的小图横向滚动 + 点击切换主图 + 滑动主图时小图自动居中，本质是两个独立 scroll 区域的状态同步，不是靠 scroll-into-view 能解决的。
最稳的做法是：小图用 scroll-view（scroll-x），主图用普通 image + transform: scale()，通过 ref 控制小图容器的 scroll-left 值。
- 小图点击切换主图时，记得调用
this.$refs.scrollView.scrollIntoView(index)（H5/APP 支持，微信小程序需自行计算scroll-left） - 主图手势缩放后，小图不联动；但主图左右滑动切换时，小图要居中当前索引 —— 这个居中逻辑不能依赖
scroll-into-view的动画，得手动算：scrollLeft = itemWidth * index - (scrollViewWidth - itemWidth) / 2 - 微信小程序中
scroll-view的scroll-left设置后不会立即生效，需加$nextTick再赋值 - 所有图片务必设置
mode="aspectFill"，否则缩放后边缘拉伸变形
uni-app 放大镜组件里 canvas 绘制的避坑细节
如果坚持用 canvas 实现高保真放大（比如需要像素级采样），uni-app 的 uni.createCanvasContext 在不同平台返回对象不一致：H5 是原生 canvas context，小程序是封装对象，APP 端则可能不支持 drawImage 的完整参数。
一个能全端跑通的最小可行 canvas 流程是：先用 uni.getImageInfo 拿到高清图宽高 → 创建同尺寸 canvas → drawImage 绘制原图 → 用 getImageData（仅 H5 支持）或退化为「截取 canvas 片段 + 缩放显示」。
- 不要在
touchmove中频繁调用ctx.drawImage，会卡顿；改为只更新clip区域和translate位移 - 微信小程序中
canvas的width/height必须是 px 单位，且不能动态改，得提前设好足够大的尺寸（如 1000rpx） - H5 端若用
toDataURL导出放大图，注意 base64 长度限制，超长会返回空字符串 - APP 端（尤其是 Android）
canvas不支持imageSmoothingEnabled = false，像素风效果无法实现
uni-app 商品图放大镜的性能临界点在哪
不是图片大小，而是「同时渲染的图层数」和「touch 事件响应频率」。实测发现：当放大镜区域超过屏幕宽度 1/3，且主图分辨率 > 1200px，iOS 微信内嵌 WebView 就开始掉帧；安卓低端机在连续快速拖动时，touchmove 回调延迟会从 16ms 拉长到 80ms+。
- 给放大镜容器加
will-change: transform只对 H5 有效，小程序和 APP 无效，还可能引发白屏 - 用
requestAnimationFrame节流touchmove更新，但别用throttle工具函数——uni-app 的onTouchMove在小程序里是合成事件，节流后坐标会跳变 - 预加载高清图时，用
uni.preloadImage而非new Image()，后者在小程序中不触发 complete 回调 - 真机调试时关闭
sourceMap，否则 iOS 下 Vue Devtools 会吃掉 30% 的 touch 响应资源
最常被忽略的是「缩放锚点」：用户手指按下的位置，在缩放过程中必须始终对应放大镜中心，这个锚点一旦偏移，整个交互就失去可信度。它不取决于 scale 值，而取决于每次 touchmove 时你用哪个坐标减去哪个 offset——这里错一位像素，体验就降一档。
