前言

之前寫過一篇微信小程序使用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動畫

效果圖