锁屏面板 touchmove 不触发或卡顿的根本原因是原生层叠上下文干扰或事件被父容器拦截;iOS 微信默认触发页面滚动,scroll-view 或 transform 容器会拦截手势,安卓部分机型(如华为 EMUI)主动拦截导致位移中断。

为什么锁屏面板 touchmove 不触发或滑动卡顿
根本原因是原生层叠上下文干扰或事件被父容器拦截。iOS 微信里 touchmove 默认会触发页面滚动,scroll-view 或带 transform 的外层容器会吃掉手势;安卓部分机型(如华为 EMUI)还会主动拦截 touchmove,导致位移计算中断。
实操建议:
- 在锁屏面板根容器上加
touch-action: pan-y(H5 必加),禁用横向滚动干扰 - 避免把面板套在
scroll-view、swiper或设置了position: fixed的父元素里 -
@touchmove绑定时必须加.stop.prevent,否则 iOS 下滑动会触发下拉刷新或页面回弹 - 真机调试优先测 iOS,关闭「辅助触控」(小白点),否则手势冲突直接失效
如何用 touch 事件实现平滑滑动解锁逻辑
不能只靠 touchstart 和 touchend,得用 touchmove 实时计算位移并应用 transform: translateY,否则动画不连贯、有延迟感。
实操建议:
- 在
data中维护startY、currentY、translateY三个值,touchstart记录起始clientY,touchmove算差值并更新translateY - 滑动阈值设为
120px,小于该值松手自动回弹,大于则判定为解锁成功 - 回弹用
uni.createAnimation+transition,别用setTimeout改translateY,否则安卓低端机卡顿明显 - 滑动过程中禁用页面滚动:在
touchstart里调用document.body.style.overflow = 'hidden',touchend恢复
滑动后如何精准触发解锁动作且不误触
常见错误是松手瞬间就执行跳转,但用户可能只是轻微滑动、还没抬手,或者手指悬停后偏移——结果误判为解锁。
实操建议:
- 只在
touchend触发判断,且必须满足:Math.abs(translateY) > 120 && translateY (向下拉才解锁) - 加防抖:
touchend后setTimeout延迟 100ms 再执行,避开系统级 touch 事件抖动 - 解锁成功后立即调用
uni.hideKeyboard()(如果软键盘开着),再uni.navigateTo,否则部分安卓机跳转白屏 - 不要在
touchmove里直接改isUnlocked = true,状态应仅由touchend最终决定
HarmonyOS 和小程序端的特殊处理
HarmonyOS 的 touch 事件坐标精度更高,但 event.touches[0].clientY 在某些版本返回 undefined;微信小程序基础库低于 2.27.0 时 touchmove 可能不连续,导致位移跳跃。
实操建议:
- HarmonyOS 下优先用
event.changedTouches[0].clientY替代event.touches[0].clientY - 微信小程序中,若检测到基础库版本
,降级为监听 <code>touchend的detail.clientY并结合时间戳估算速度 - 所有平台都应在
page.json中配置"disableScroll": true,防止系统级滑动抢事件 - 解锁成功后手动调用
uni.vibrateShort(),弥补 HarmonyOS 上触觉反馈缺失问题
touchend 可能比 touchmove 晚触发 50ms,而 HarmonyOS 同一事件里 touches 和 changedTouches 长度可能不一致。这些细节不提前对齐,真机上就是“有时行、有时不行”。


















