小程序 touchstart、touchmove、touchend 在真机中问题解决

微信小程序中使用
bindtouchstart 手指触摸动作开始
bindtouchmove 手指触摸移动
bindtouchend 手指触摸动作结束
在模拟器没有问题,很丝滑
但是在真机(ios)中,这三个方法都会在手指离开屏幕后同时执行,并不会在按下、滑动时执行。

<!--只需要把 bind 改为 catch 就可以马上执行,而不会在手指抬起后同时执行三个-->
<scroll-view bindtouchstart='start' bindtouchmove='move' bindtouchend='end'></scroll-view>
<!--我做的是自定义下拉刷新,所以要监听 move 的距离-->
<!--bind 的话,我下拉后才触发,而不是下拉的过程中触发-->
<!--所以 catch:touchmove 就可以在下拉的过程中监听-->
<scroll-view bindtouchstart='start' catch:touchmove='move' bindtouchend='end'></scroll-view>
在JavaScript,`touchend`, `touchstart`, 和 `touchmove` 这三个事件分别对应触摸屏幕的结束、开始和移动阶段,常用于实现滑动图片或手势操作。下面是一个简要的介绍: 1. `touchstart` (触摸开始):当用户手指接触屏幕并开始滑动时触发,此时你可以获取到触点的坐标(如位置、数量等)以及一些其他触控信息,通常用于初始化滑动状态。 ```javascript function handleTouchStart(e) { var touch = e.touches; startTouchPosition = touch.pageX; // ... 其他初始化操作 } ``` 2. `touchmove` (触摸移动):用户手指在屏幕上持续移动时触发,你可以根据上一次的`touchstart`位置来计算当前的滑动距离。 ```javascript function handleTouchMove(e) { var touch = e.touches; var currentTouchPosition = touch.pageX; var slideDistance = currentTouchPosition - startTouchPosition; // 更新图片位置 moveImage(slideDistance); } ``` 3. `touchend` (触摸结束):当用户抬起手指时触发,这时滑动已经完成,你可以在此时完成相关的动作,比如停止滑动效果,或者处理用户的交互选择。 ```javascript function handleTouchEnd(e) { // 结束滑动动画 stopSlide(); // 可能的后续操作,如图片缩放或切换等 } ``` 在实际应用,这些事件通常需要在HTML元素上添加`touchstart`, `touchmove`, 和 `touchend` 事件监听器,并且在每个函数内部管理滑动状态和响应行为。记得在处理完事件后清除事件监听,以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值