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

作者:一诺滚雪球日期:2025/10/6

前言

在使用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

语法:

1element {
2    touch-action: auto | none | manipulation | pan-x | pan-y | pan-x pan-y | pinch-zoom;
3}
4

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!


uniapp微信小程序安卓手机Touchend事件无法触发》 是转载文章,点击查看原文


相关推荐


Python 的内置函数 anext
IMPYLH2025/10/4

Python 内建函数列表 > Python 的内置函数 anext 如果你熟悉 next() 函数,那么 anext 就是它的异步版本,专为异步迭代器(async for 循环)设计。随着 Python 异步编程(asyncio)的普及,anext 在协程(coroutine)环境下提供了更优雅的方式来获取异步迭代器的下一个值。 anext 的函数原型如下: async def anext(async_iterator): ''' 获取异步迭代器的下一数据项, 没


VB6 ADO没有轻量级内存数据库吗?类似SQLITE
专注VB编程开发20年2025/10/3

ACCESS数据库很方便,为什么不实现一个内存版的数据库?比如创建MDB时实际保存到内存区域,再用内存映射为文件句柄,然后就要吧进行读写操作了。不需要任何新的SQL等技术,唯一的区别就是把从硬盘读写变成内存读写,如果硬盘占用10MB,内存可以预分配50M空间,插入数据可以不断扩展虚拟文件的大小。只不过数据库文件锁也要做内存文件,基本不需要多用户访问。 abc.mdb , abc.ldb 不过现在硬盘也便宜了,怕高频访问掉速的话也可以用RAMDISK虚拟内存硬盘,或者使用SQLITE,SQL S


卡尔曼滤波
不三不四୭2025/10/2

在动态系统的状态估计领域,卡尔曼滤波 (Kalman Filter) 作为一种最优线性滤波算法,具有里程碑式的地位。自 1960 年由鲁道夫・卡尔曼 (Rudolf E. Kalman) 提出以来,卡尔曼滤波已经广泛应用于导航、控制、信号处理、图像处理等众多领域。它的核心优势在于能够通过融合系统模型预测和传感器测量这两种不同来源的信息,提供最优的状态估计结果,特别适用于处理带有噪声的数据。​ 卡尔曼滤波的卓越性能源于其独特的递归结构,它不需要存储所有历史数据,而是通过不断更新当前状态估计,高效地


Docker linux 离线部署springcloud
qq_171520352025/10/2

搭建dcoker环境 1. 首先在有网络的机器上下载Docker的离线安装包:    - 访问 https://download.docker.com/linux/static/stable/x86_64/    - 下载对应版本的 docker-<version>.tgz 文件 2. 将下载的安装包传输到目标Linux机器上(可以使用U盘或其他存储设备) 3. 在目标机器上执行以下命令:    ```bash    # 解压安装包    tar xzvf docker-


链表转置算法
C_lea10/2/2025

node(4)->node(3)->node(2)->node(1)->node(0)结果,但是运行的时候发现不正确,,这个会导致链表的next指针被修改了,那么n.next肯定指向不了真正的下一个对象。**思考步骤:**遍历一次就要形成一个新的转置链表,首先想到的就是。所以我们需要定义一个临时变量,保存链表的next内容。看上去很简单,整个遍历完毕后,就是。我们在遍历链表的时候肯定是这么来的。但是我们在上文遍历的情况下,设置了。最后输出的pre就是转置后的链表了。给出链表node,如何转置并输出。


华三交接机HCL模拟器搭建DHCP功能
cws20040110/1/2025

dhcp server ip-pool vlan10 创建基于接口VLAN10的地址池。通过dis dhcp server ip-in-use 或者用 dis arp。(10)PC_26、PC_30和PC_5都能通过DHCP自动获取IP地址。dis dhcp server ip-in-use 查看已分配地址。(2)在交换机分别创建VLAN 10、VLAN 20、vlan 30。dhcp server ip-pool vlan30 创建地址池。


Python学习历程——基础语法(print打印、变量、运算)
蓝桉~MLGT9/30/2025

本文介绍了Python基础语法中的print函数用法,适合有Java基础的快速入门。主要内容包括: print函数的基本语法和参数说明(sep间隔符、end结束符、file输出重定向) 多种打印方式:单对象、多对象、空行打印 格式化输出:f-string、.format()和%格式化 高级用法:输出重定向到文件/内存、缓冲控制、调试模板 特殊字符处理与数学函数结合使用 文章重点演示了print函数的各种参数组合和实际应用场景,如进度条显示、条件打印、调试输出等,并对比了不同格式化方法的差异。


Spring Boot 实现微信登录,So Easy !
皮皮林5512025/10/7

前言 小程序登录在开发中是最常见的需求,哪怕小程序登录不是你做,你还是要了解一下流程,后续都要使用到openId和unionId,你需要知道这些是干什么的。 需求分析 点击登录会弹出弹窗,需要获取用户手机号进行登录。 图片 微信登录业务逻辑规则: 图片 思路说明 参考微信官方文档的提供的思路,官方文档: developers.weixin.qq.com/miniprogram… 微信官方推荐登录流程: 图片 注意点: • 前端在小程序集成微信相关依赖,调用wx.login获取临时登录


C# 泛型(Generic)
wjs20242025/10/9

C# 泛型(Generic) 泛型是C#编程语言中一种强大的功能,它允许我们在不具体指定数据类型的情况下编写代码。这种设计模式使得代码更加通用、灵活,并且可以避免类型转换的错误。下面将详细探讨C#泛型的概念、应用场景、实现方法以及相关最佳实践。 泛型的概念 在C#中,泛型允许我们定义可以支持多种数据类型的类或方法。这种类型参数化的机制使得代码更加通用,从而减少了类型转换的需要,并提高了代码的复用性。 泛型的好处 代码复用:通过泛型,我们可以定义一次模板,然后在多个地方复用。


Ling-1T:蚂蚁百灵如何以“非思考”策略,开启万亿参数效率新篇章?
墨风如雪2025/10/10

2025年10月9日,AI世界再次被一颗“重磅炸弹”点燃。蚂蚁集团百灵大模型团队正式发布了其Ling 2.0系列的首款旗舰模型——Ling-1T。这不仅仅是一个拥有万亿参数的通用大语言模型,它更代表着蚂蚁集团在大模型设计理念上的一次大胆创新和实践突破。它已全面开源,正等待着全球开发者共同探索其无限潜力。 “非思考”定位:速度与精准的完美结合 初听“非思考模型”,你或许会感到好奇。这并非 Ling-1T 不具备推理能力,而是蚂蚁集团对大模型家族的一种策略性划分。在百灵模型矩阵中,“Ling系列”

首页编辑器站点地图

Copyright © 2025 聚合阅读

License: CC BY-SA 4.0