前言

之前(qian)寫(xie)過一篇微信小程序(xu)使用movable-view實(shi)現左滑刪除功能，有同學使用了這種方案并(bing)提出我之前(qian)沒有發現的(de)bug（現在bug已(yi)進行了修復），感謝(xie)。

有同(tong)學問了如果(guo)不使(shi)用(yong)movable-view的話如何來實現(xian)左滑刪(shan)(shan)除？那這(zhe)次就寫一下如何只使(shi)用(yong)touch事件來實現(xian)左滑刪(shan)(shan)除。

源碼

Talk is cheap. Show me the code.

實現原理

1. 此次組件需要處理touchstart、touchmove和touchend三個touch事件
2. touchstart事件時需要先禁用掉transition動畫，同時記錄下觸摸點的pageX和pageY的值，以及此時滑動的起始點，即刪除按鈕的狀態，隱藏還是顯示。

3. touchmove事件處(chu)理(li)手指的滑動，此時需要進行以下(xia)不(bu)同(tong)情況的判斷(duan)：

   • 手指上下移動的距離超過左右滑動的距離，此時我們可以把用戶的操作理解為上下滑動而不是左右滑動，此時我們對組件不進行移動

   • 判斷如(ru)果是以下兩種(zhong)情況時不進行組件的移動：

     1. 在最右邊時向右滑動;
     2. 在最左邊時向左滑動

   • 如果手指滑動超出了刪除按鈕的寬度時（包括左滑和右滑兩個方向），取按鈕寬度作為移動距離
   • 其他情況：手指滑動了多少就對組件位移多少

4. touchend事件則(ze)是處理(li)手指離開屏幕之(zhi)后(hou)組件的一些后(hou)續(xu)動(dong)作:

   • 先根據touchmove中記錄的手指位移方向進行判斷，非左右滑動時則對組件不進行移動
   • 左右移動超出右滑最大位移時，設置位移終點為0
   • 左右移動超出左滑最大位移時，設置位移終點為負的刪除按鈕寬度

   • 以下兩種情(qing)況組件都滑動到右邊起(qi)點（即刪(shan)除按鈕隱(yin)藏的狀態）：

     1. 從右邊起點左滑但未超過最大位移的一半，回退到右邊起點
     2. 從左邊起點右滑且超過最大位移的一半，繼續滑到到右邊起點

   • 其他情況組件都滑到左邊起點（即刪除按鈕顯示的狀態）
   • 設置位移值，并打開組件的transition動畫

效果圖