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!

相关推荐
你的人类朋友4 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程4 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel4 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
双向335 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下5 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友5 小时前
什么是基础设施中间件
前端·后端
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
海绵宝龙6 小时前
将若依(RuoYi)项目创建为私有Gitee仓库的完整步骤
前端·gitee
ps_xiaowang7 小时前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js