uni-app怎么实现图片手势缩放 uni-app仿微信图片查看器【技巧】
uni-app中多点触控需用touches而非changedTouches判断双指,缩放锚点应为两指中心并用复合transform实现,小程序需catchtouchmove+enhanced模式优化频率,双击放大应基于tap事件并动态计算最大缩放倍数。uni-app 里 touchstart 拿不到多点触控的全部手指坐标?默认情况下,touchstart 事件的 touches 列表只包含当前触发事件的手指(通常是第一个),而 changedTouches 才是本次变化的手指集合——缩放必须靠它判断是否双指同时按下。实操建议:监听 touchstart 和 touchmove,但所有距离/角度计算一律基于 event.touches(不是 event.changedTouches)——因为缩放需要实时跟踪两个手指的相对位置,touches 始终反映当前屏幕上的全部活动手指在 touchstart 阶段就检查 event.touches.length === 2,满足才启用缩放状态,避免单指误触发H5 平台下部分安卓 WebView 对 touches 更新有延迟,建议加一层防抖:两次 touchmove 间隔小于 16ms 才计算,否则跳过uni-app 图片用 transform: scale() 缩放后定位偏移怎么办?直接对 <image> 元素设 scale 会以左上角为原点缩放,导致图片“跑出视口”,微信查看器是以两指中心为缩放锚点的。实操建议:缩放时同步计算两指中心点 centerX/centerY,并用 transform: translate(-${centerX}px, -${centerY}px) scale(${scale}) translate(${centerX}px, ${centerY}px) 实现锚点缩放别用 transform-origin 动态改——uni-app 的 view 或 image 在某些小程序平台不支持该 CSS 属性动态生效缩放后立刻调用 uni.createSelectorQuery() 获取缩放后真实尺寸,用于后续边界检测(比如不能缩太小、不能拖出可视区)uni-app 小程序平台(微信/支付宝)里 touchmove 频率太低导致缩放卡顿?微信小程序基础库 2.20+ 后 touchmove 默认被节流,iOS 尤其明显,连续快速移动时事件间隔可能达 60ms 以上,手势体验断断续续。 There’s An AI For That 全球领先的 AI 聚合器,收集10,225个AI工具,可用于超过2,548个任务。
更多推荐
所有评论(0)