uni-app的uni.previewimage默认不支持双击缩放，需手写组件：通过touchstart/touchend时间差与位置偏移判定双击，用transform: scale()配合动态transform-origin实现“指哪打哪”缩放，并联动手势拖拽，注意各端touch事件差异与真机调试。
uni-app previewImage 默认不支持双击缩放
uni-app 的 uni.previewImage 是个封装好的原生级图片查看器，但它在所有平台（包括微信小程序、App、H5）都不响应双击事件，也没有暴露手势控制接口。这不是你写法错了，是 API 本身就没提供这个能力。
想实现「双击放大/还原」，必须绕过 uni.previewImage，自己手写一个轻量级图片查看器组件，核心是监听 touchstart + touchend 时间差和位置偏移，模拟双击判定。
- 双击判定不能只看时间间隔，还要限制两次点击位置距离（比如
25px内），否则快速滑动容易误触发 - H5 端可用
event.detail.touches[0]拿坐标；小程序端要用event.touches[0]，且需在view上显式加catchtouchstart防止冒泡中断 - App 端（iOS/Android）对
touch事件响应更稳定，但要注意web-view嵌套场景下事件可能被截断
用 scale + transform 实现平滑双击缩放
不要用 width/height 动态改尺寸——会失真、触发重排、无法居中缩放。正确做法是用 transform: scale() 配合 transform-origin 控制缩放中心点。
关键点：双击时，把当前点击位置映射为视口坐标，再转成图片内部坐标，作为 transform-origin 的值，这样缩放才“指哪打哪”。
- 初始状态设
scale = 1，transform-origin: center center - 双击时计算：
originX = (clientX - offsetX) / scale，同理算originY，然后设为transform-origin: ${originX}px ${originY}px - 缩放后记得同步更新
scale值（如从1 → 2.5），并限制最大值（建议 ≤3），避免内存溢出或渲染卡顿 - 用
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)实现自然缓动，别用ease——太拖沓
双击缩放和手势拖拽必须共存，但别直接套用 movable-area
uni-app 的 movable-area 组件看似省事，但它和双击缩放逻辑冲突：缩放后 movable-area 的边界计算失效，拖拽会错位甚至锁死。真实项目里得自己处理 touchmove 位移 + scale 联动。
- 拖拽前先判断当前
scale > 1，否则忽略拖拽（防止小图乱晃） -
touchmove中用deltaX = e.touches[0].clientX - startX，再除以当前scale得到图片内实际位移量 - 位移要加边界限制：左边界 =
0，右边界 =imgWidth * scale - containerWidth，上下同理 - 别忘了在双击缩放后重置拖拽起点（
startX/Y），否则下次拖拽会跳变
真机调试时 H5 和小程序的 touch 行为差异最易踩坑
H5 在 Chrome 模拟器里 touchstart 可能不触发，或 touches 长度为 0；小程序真机上某些安卓机型（尤其 OPPO、vivo）会吞掉第二次 touchstart，导致双击判定失败。
- 务必在
onTouchStart里加e.preventDefault()（H5 必须，小程序可选但建议加） - 双击计时器用
setTimeout，但清除时机要精确：在touchend后立刻清，而不是等整个事件流结束 - 给图片容器加
user-select: none和-webkit-user-drag: none，防 iOS 长按呼出菜单打断交互 - 测试阶段优先跑真机，模拟器里的 touch 行为跟实际差得远，尤其是快速双击节奏
双击缩放看着简单，真正卡住人的永远是 touch 事件在不同环境下的微妙表现——不是逻辑没想通，是某个机型某个系统版本悄悄改了事件分发顺序。留好日志打点，console.log(e.type, e.touches.length) 多打几次，比查文档管用。
