微信小程序使用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動畫

效果圖