脚本宝典收集整理的这篇文章主要介绍了微信小程序使用touch事件实现左滑删除,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
之前写过一篇微信小程序使用movable-view实现左滑删除功能,有同学使用了这种方案并提出我之前没有发现的bug(现在bug已进行了修复),感谢。
有同学问了如果不使用movable-view
的话如何来实现左滑删除?那这次就写一下如何只使用touch
事件来实现左滑删除。
源码
Talk is cheap. Show me the code.
实现原理
- 此次组件需要处理
touchstart
、touchmove
和touchend
三个touch
事件
-
touchstart
事件时需要先禁用掉transITion
动画,同时记录下触摸点的pageX
和pageY
的值,以及此时滑动的起始点,即删除按钮的状态,隐藏还是显示。
-
touchmove
事件处理手指的滑动,此时需要进行以下不同情况的判断:
-
touchend
事件则是处理手指离开屏幕之后组件的一些后续动作:
- 先根据
touchmove
中记录的手指位移方向进行判断,非左右滑动时则对组件不进行移动
- 左右移动超出右滑最大位移时,设置位移终点为0
- 左右移动超出左滑最大位移时,设置位移终点为
负的删除按钮宽度
-
以下两种情况组件都滑动到右边起点(即删除按钮隐藏的状态):
- 从右边起点左滑但未超过最大位移的一半,回退到右边起点
- 从左边起点右滑且超过最大位移的一半,继续滑到到右边起点
- 其他情况组件都滑到左边起点(即删除按钮显示的状态)
- 设置位移值,并打开组件的
transition
动画
效果图
以上是脚本宝典为你收集整理的微信小程序使用touch事件实现左滑删除全部内容,希望文章能够帮你解决微信小程序使用touch事件实现左滑删除所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。