微信小程序movable-view實現左滑刪除功能

前言

微信小程序官方沒有自帶的左滑刪除功能，通常開發的時候都是使用touch事件來開發自定義的左滑刪除，處理起來會有點麻煩。微信小程序出了movable-view(點擊查看官方文檔)以後，咱們就能夠使用movable-view來開發左滑刪除功能了。

源碼

Talk is cheap. Show me the code.

實現原理

1. 左滑的元素高度須要是固定的，由於movable-view要求必須設置width和height；
2. 刪除的按鈕固定在右側，設置必定的寬度；
3. movable-area寬度設置爲100vw-刪除按鈕寬度，movable-view寬度設置爲100vw；
4. 根據movable-view的x屬性來控制元素滑動，爲了不滑動到一半隻顯示部分按鈕，能夠設置滑動小於一半再也不滑動時回覆到初始位置，超過一半則繼續滑動到底。
5. 一直拖動movable-view時會出現只觸發touch事件的狀況，因此須要針對touchstart和touchend事件進行特殊狀況處理。

效果圖

• 左滑

• 刪除