uni.previewImage无法实现朋友圈式局部放大，仅支持全屏轮播预览；需自封装原生图层，结合touch事件坐标计算、transform缩放与双指手势，并分端处理（App用plus.nativeObj.View，H5降级）。
uni-app里怎么用uni.previewImage实现朋友圈式图片预览
直接上结论：不能只靠uni.previewImage实现“点击局部放大”——它默认是全屏轮播预览，没有缩放、拖拽、双指手势支持。朋友圈那种“点哪放大哪、可拖动、可缩放”的效果，必须自己封装一个原生级图层，uni.previewImage只适合做简单全图查看。
真正可行的路径是：监听图片点击 → 获取点击位置（x, y）→ 动态创建带 transform 的 view 层 → 用 scale + translate 模拟局部放大。iOS 和 Android 原生渲染层对 transform 支持良好，但 H5 端会卡顿或失真，这点必须提前意识到。
为什么touchstart事件拿不到精确坐标？
在 uni-app 的 image 组件上直接绑定 @touchstart，拿到的 touches[0].pageX/Y 是相对于视口的，而图片可能被缩放、居中、裁剪（比如 mode="aspectFill"），导致坐标映射错乱。
- 先用
uni.createSelectorQuery()获取image元素的boundingClientRect，注意要等图片加载完成（@load后再查） - 计算点击点相对于图片左上角的偏移：
relX = pageX - rect.left，再除以图片实际渲染宽高比缩放系数（需根据mode推算） - H5 端还要额外减去
window.scrollY，否则滚动后坐标偏移
局部放大的 DOM 层怎么写才不闪、不卡
放大图层必须脱离文档流、用 position: fixed，且层级（z-index）要高于所有业务组件。关键不是“怎么做”，而是“怎么不破坏原布局”：
- 放大前先用
getComputedStyle记录原图的transform和opacity，避免动画冲突 - 放大图层的
width/height设为固定值（如300px），不要用百分比，否则在不同 DPI 设备上缩放比例失真 - 启用硬件加速：
style="transform: translateZ(0); will-change: transform;" - Android 真机上，如果父容器有
overflow: hidden，放大图层会被裁剪——得临时给 body 加overflow: visible !important
双指缩放和拖拽在 uni-app 里怎么接原生能力
uni-app 的 touchmove 在 iOS 上默认会触发页面回弹，Android 上容易误触发 scroll，纯 JS 实现双指缩放体验差、延迟高。更稳的做法是：只在 App 端调用原生插件，H5 端降级为单击切换全屏模式。
- App 端可用
uni.getSystemInfoSync().platform === 'ios'判断，然后调用plus.nativeObj.View创建原生图层，它支持gestureEvent: 'pinch' - 别自己算 pinch 缩放比例——用
event.scale直接取，比 JS 计算两指距离稳定得多 - 拖拽时禁用
pageScrollTo和下拉刷新：uni.startPullDownRefresh({disableScroll: true})，否则手指一动就触发下拉
复杂点在于坐标系转换：原生 pinch 事件的 center 坐标是屏幕坐标，得反向映射回图片纹理坐标，这个换算一旦出错，放大中心就会漂移。多数人卡在这一步，不是逻辑问题，是没校准设备像素比（window.devicePixelRatio）和 CSS 像素之间的关系。
