微信小程序使用touch事件实现左滑删除

前言

以前写过一篇微信小程序使用movable-view实现左滑删除功能，有同窗使用了这种方案并提出我以前没有发现的bug（如今bug已进行了修复），感谢。

有同窗问了若是不使用movable-view的话如何来实现左滑删除？那此次就写一下如何只使用touch事件来实现左滑删除。

源码

Talk is cheap. Show me the code.

实现原理

1. 这次组件须要处理touchstart、touchmove和touchend三个touch事件
2. touchstart事件时须要先禁用掉transition动画，同时记录下触摸点的pageX和pageY的值，以及此时滑动的起始点，即删除按钮的状态，隐藏仍是显示。

3. touchmove事件处理手指的滑动，此时须要进行如下不一样状况的判断：

   • 手指上下移动的距离超过左右滑动的距离，此时咱们能够把用户的操做理解为上下滑动而不是左右滑动，此时咱们对组件不进行移动

   • 判断若是是如下两种状况时不进行组件的移动：

     1. 在最右边时向右滑动;
     2. 在最左边时向左滑动

   • 若是手指滑动超出了删除按钮的宽度时（包括左滑和右滑两个方向），取按钮宽度做为移动距离
   • 其余状况：手指滑动了多少就对组件位移多少

4. touchend事件则是处理手指离开屏幕以后组件的一些后续动做:

   • 先根据touchmove中记录的手指位移方向进行判断，非左右滑动时则对组件不进行移动
   • 左右移动超出右滑最大位移时，设置位移终点为0
   • 左右移动超出左滑最大位移时，设置位移终点为负的删除按钮宽度

   • 如下两种状况组件都滑动到右边起点（即删除按钮隐藏的状态）：

     1. 从右边起点左滑但未超过最大位移的一半，回退到右边起点
     2. 从左边起点右滑且超过最大位移的一半，继续滑到到右边起点

   • 其余状况组件都滑到左边起点（即删除按钮显示的状态）
   • 设置位移值，并打开组件的transition动画

效果图