前言

之前寫過一篇微信小程序使用movable-view實(shí)現(xiàn)左滑刪除功能，有同學(xué)使用了這種方案并提出我之前沒有發(fā)現(xiàn)的bug（現(xiàn)在bug已進(jìn)行了修復(fù)），感謝。

有同學(xué)問了如果不使用movable-view的話如何來實(shí)現(xiàn)左滑刪除？那這次就寫一下如何只使用touch事件來實(shí)現(xiàn)左滑刪除。

源碼

Talk is cheap. Show me the code.

實(shí)現(xiàn)原理

1. 此次組件需要處理touchstart、touchmove和touchend三個(gè)touch事件
2. touchstart事件時(shí)需要先禁用掉transition動(dòng)畫，同時(shí)記錄下觸摸點(diǎn)的pageX和pageY的值，以及此時(shí)滑動(dòng)的起始點(diǎn)，即刪除按鈕的狀態(tài)，隱藏還是顯示。

3. touchmove事件處理手指的滑動(dòng)，此時(shí)需要進(jìn)行以下不同情況的判斷：

   • 手指上下移動(dòng)的距離超過左右滑動(dòng)的距離，此時(shí)我們可以把用戶的操作理解為上下滑動(dòng)而不是左右滑動(dòng)，此時(shí)我們對(duì)組件不進(jìn)行移動(dòng)

   • 判斷如果是以下兩種情況時(shí)不進(jìn)行組件的移動(dòng)：

     1. 在最右邊時(shí)向右滑動(dòng);
     2. 在最左邊時(shí)向左滑動(dòng)

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

4. touchend事件則是處理手指離開屏幕之后組件的一些后續(xù)動(dòng)作:

   • 先根據(jù)touchmove中記錄的手指位移方向進(jìn)行判斷，非左右滑動(dòng)時(shí)則對(duì)組件不進(jìn)行移動(dòng)
   • 左右移動(dòng)超出右滑最大位移時(shí)，設(shè)置位移終點(diǎn)為0
   • 左右移動(dòng)超出左滑最大位移時(shí)，設(shè)置位移終點(diǎn)為負(fù)的刪除按鈕寬度

   • 以下兩種情況組件都滑動(dòng)到右邊起點(diǎn)（即刪除按鈕隱藏的狀態(tài)）：

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

   • 其他情況組件都滑到左邊起點(diǎn)（即刪除按鈕顯示的狀態(tài)）
   • 設(shè)置位移值，并打開組件的transition動(dòng)畫

效果圖