uniapp微信小程序安卓手机Touchend事件无法触发

前言

在使用uniapp开发微信小程序时,需要做一个下拉功能,使用touch事件实现。实际情况出现了touchend事件无法触发的情况。

如何解决呢?

1. 解决方案

移动项目开发过程中,经常需要用到滑动的事件来处理一些效果。正常情况下,我们会通过 touchstart->touchmove->touchend 的过程来定义这个事件。这些事件的触发顺序是 touchstart, touchmove, touchmove ..... touchend。

绝大部分平板或手机是这样有序执行。但是以Android 4.0.4为首的他们的touchend事件没有像预期的那样触发。

监听这些事件我们会发现,当只是轻点一下屏幕时,touchend可以正常触发。但是只要当touchmove 被触发之后,touchend就不会再被触发了,而且touchmove也没有持续触发。

在网上搜集了一些资料显示,这是 Android 上浏览器的bug

On Android ICS if no preventDefault is called on touchstart or the firsttouchmove,

further touchmove events and the touchend will not be fired.

1.1 添加修饰符

正如提到的我们只需要在 touchstart 或者 touchmove 里执行一下 e.preventDefault(); 就可以避免这个bug。但是,问题来了:添加了 preventDefault 之后,正常的scroll事件也被屏蔽了!我们意外的发现滚动条也不能用了!

所以此方案不行。

1.2 使用touch-action

语法:

arduino 复制代码
element {
    touch-action: auto | none | manipulation | pan-x | pan-y | pan-x pan-y | pinch-zoom;
}

auto:默认值。浏览器会应用其默认的触摸行为。

none:禁止触摸事件上的默认行为,所有触摸事件都会传递给元素(包括滚动)。这通常用于需要完全控制触摸行为的自定义滚动、拖拽等场景。

manipulation:允许水平及垂直滚动,并阻止其他非标准的默认触摸行为(如双击缩放)。这通常适用于需要滚动的区域,但又不希望触发其他复杂触摸交互的场合。

pan-x:允许水平滚动,并阻止其他所有默认触摸行为(包括垂直滚动)。

pan-y:允许垂直滚动,并阻止其他所有默认触摸行为(包括水平滚动)。

pan-x pan-y:允许水平和垂直滚动,并阻止其他所有默认触摸行为。

pinch-zoom:允许用户通过触摸进行缩放(例如,双指缩放)。注意,这个值并不阻止滚动,滚动行为仍可能由 auto、pan-x、pan-y 或 manipulation 控制。

使用场景:

自定义滚动:当你需要在某个元素内实现自定义滚动时,可以将 touch-action 设置为 none,这样浏览器就不会干预你的滚动逻辑。

提升滚动性能:对于大型列表或图片库,可以通过设置 touch-action: pan-y 来优化垂直滚动性能,同时阻止其他可能会干扰滚动流畅性的默认触摸行为。

防止不必要的缩放:在某些情况下,你可能不希望用户通过触摸来缩放页面或元素(尤其是在小屏幕设备上),这时可以将 touch-action 设置为 manipulation 或更具体的值来阻止这种行为。

这种方案也会出现滚动事件无法触发。

1.3 touchcancel替代

touchend事件无法触发、但是touchcancel可以触发,这是一个改动最小的方案。

1.4 使用scroll-view组件实现

因为scroll-view组件存在下拉的实现方式,可以一开始基于组件开发。

总结

最后总结一下:出现touchend事件无法触发的情况,使用touchcancel事件替换影响最小。

如有错误,请指正O^O!

相关推荐
Yao80612 分钟前
MinIO自建对象存储,省OSS费用的完整方案
前端·后端
2501_9339232520 分钟前
设计网页的时候加载不出来怎么办?认识常见的状态码
前端·spring
only-lucky26 分钟前
QML深入学习五(Controls模块)
前端·javascript·学习
程序员黑豆35 分钟前
鸿蒙应用开发之路由:Router 页面路由使用教程
前端·harmonyos
gyx_这个杀手不太冷静1 小时前
Agent开发进阶指南(第 2 章):Agent 运行全流程拆解、上下文窗口、流式输出、记忆系统与 Function Call 实战
前端·架构·agent
anyup1 小时前
像这种问题千万别自己动手,否则你可太看不起 AI 了
前端·架构·trae
hunterandroid2 小时前
[鸿蒙从零到一] HarmonyOS Web 组件与 JSBridge 通信实战:从页面加载到安全协议
前端
xingren2 小时前
「拍摄器」UI 特效 - 在 Winform/WPF/WinUI3/Avalonia/Web 的实现
前端
leslie1182 小时前
npm常用命令
前端·npm
艾伦野鸽ggg2 小时前
axios 基本操作
前端