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!

相关推荐
江华森26 分钟前
前端构建工具 Webpack 速览
前端·webpack·node.js
谙忆10241 小时前
HTTP 图片缓存实战:Cache-Control、ETag、内容哈希文件名与 CDN 回源到底怎么配
前端
小妖6661 小时前
React input 输入卡顿问题
前端·javascript·react.js
এ慕ོ冬℘゜1 小时前
JavaScript 数据类型检测与转换、运算符超全实战详解
前端·html
kyriewen1 小时前
我用 AI 写代码快了 3 倍——然后同事的 Code Review 全变成了我的
前端·程序员·ai编程
李明卫杭州2 小时前
Vue2 portal-target 组件与 Vue3 的针对性优化
前端·javascript·vue.js
Tyler_13 小时前
iOS PlayWright mcp server
前端·ios·ai编程
嘟嘟07173 小时前
从零理解 MCP:手写一个本地 MCP Server 并接入 LangChain Agent
前端·后端
cocoafei3 小时前
GPT-5.6 后,别再混淆 ChatGPT 和 Codex 额度了
前端·人工智能·chatgpt
你怎么知道我是队长3 小时前
JavaScript的函数介绍
开发语言·前端·javascript