前言
在使用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!