微信小程序使用touch事件实现左滑删除
- 作者: admin
- 发布于 2018-12-26 10:41:06
- 来源:
- 栏目:解决方案
导语: 前言 之前写过一篇微信小程序使用movable-view实现左滑删除功能,有同学使用了这种方案并提出我之前没有发现的bug(现在
前言
之前写过一篇微信小程序使用movable-view实现左滑删除功能,有同学使用了这种方案并提出我之前没有发现的bug(现在bug已进行了修复),感谢。
有同学问了如果不使用movable-view 的话如何来实现左滑删除?那这次就写一下如何只使用touch 事件来实现左滑删除。
源码
Talk is cheap. Show me the code.
实现原理
- 此次组件需要处理
touchstart 、touchmove 和touchend 三个touch 事件
touchstart 事件时需要先禁用掉transition 动画,同时记录下触摸点的pageX 和pageY 的值,以及此时滑动的起始点,即删除按钮的状态,隐藏还是显示。
-
touchmove 事件处理手指的滑动,此时需要进行以下不同情况的判断:
- 手指上下移动的距离超过左右滑动的距离,此时我们可以把用户的操作理解为上下滑动而不是左右滑动,此时我们对组件不进行移动
-
判断如果是以下两种情况时不进行组件的移动:
- 在最右边时向右滑动;
- 在最左边时向左滑动
- 如果手指滑动超出了删除按钮的宽度时(包括左滑和右滑两个方向),取按钮宽度作为移动距离
- 其他情况:手指滑动了多少就对组件位移多少
-
touchend 事件则是处理手指离开屏幕之后组件的一些后续动作:
效果图
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。