之前寫(xiě)過(guò)一篇微信小程序使用movable-view實(shí)現(xiàn)左滑刪除功能,有同學(xué)使用了這種方案并提出我之前沒(méi)有發(fā)現(xiàn)的bug(現(xiàn)在bug已進(jìn)行了修復(fù)),感謝。
有同學(xué)問(wèn)了如果不使用movable-view的話如何來(lái)實(shí)現(xiàn)左滑刪除?那這次就寫(xiě)一下如何只使用touch事件來(lái)實(shí)現(xiàn)左滑刪除。
Talk is cheap. Show me the code.
touchmove事件處理手指的滑動(dòng),此時(shí)需要進(jìn)行以下不同情況的判斷:
判斷如果是以下兩種情況時(shí)不進(jìn)行組件的移動(dòng):
- 在最右邊時(shí)向右滑動(dòng);
- 在最左邊時(shí)向左滑動(dòng)
touchend事件則是處理手指離開(kāi)屏幕之后組件的一些后續(xù)動(dòng)作:
以下兩種情況組件都滑動(dòng)到右邊起點(diǎn)(即刪除按鈕隱藏的狀態(tài)):
- 從右邊起點(diǎn)左滑但未超過(guò)最大位移的一半,回退到右邊起點(diǎn)
- 從左邊起點(diǎn)右滑且超過(guò)最大位移的一半,繼續(xù)滑到到右邊起點(diǎn)
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)