微信小程序實現左滑刪除-一切沒有那麼簡單

左滑刪除效果在app的交互方式中十分流行，比如全民應用微信

再比如曾引起很大反響的效率app Clear

從技術上來說，實現這個效果並不困難，響應一下滑動操作，移動一下組件，再加上些坐標計算，狀態記錄就可以了。也有一些文章介紹了在小程序上如何實現這一效果，不過我基本可以確定這些開發者沒有在真機上詳細測試，因為經我實踐發現，在小程序上想要完美實現這個效果幾乎是不可能完成的任務。

這一切要從小程序的事件機製說起。對於滑動類操作，小程序提供了和兩種響應事件的方式，區別在於是否阻止事件冒泡，但卻沒有提供方法，也就是說無法在程序中動態確定是否阻止某個事件冒泡。

然後再說一下小程序的另一個特性，這個特性隻在真機上有效，那就是框架默認為page提供了垂直方向的滾動效果，無需寫一行代碼，並且小程序還貼心的提供了和,嗯，一切都很完美。

然後當這些特性遇到左滑效果，那就尷尬了。完美的左滑刪除效果，當判定為水平滑動時，要忽略用戶垂直方向上的移動(畢竟不能指望用戶的手指不會上下抖動吧)。然而因為沒有方法，要麼catch住滑動事件，要麼你就隻能期待用戶的手指嚴格水平滑動了。

由於上述原因，在我見到的小程序中，幾乎沒有使用左滑刪除操作的，說幾乎是因為確實有一款實現了該效果，印象微筆記清單

可以看到在左滑時頁麵也會同時上下滾動，體驗並不好。(順便說一句，印象微筆記清單早起版本使用scroll-實現該效果，體驗就更差了)

當然，也可以catch滑動事件，不過這樣水平滑動時沒問題，垂直滑動時你也不會看到任何反應了。

當我發現這些問題時感到十分沮喪，不過我想問題的核心就是要能動態阻止頁麵垂直滾動。而除了view之外，scroll-view也具備垂直滾動的能力，並且還有一個屬性。是的，我想你們也想到了，隻要在合適的條件下動態設置該屬性，那就應該可以實現想要的效果了。

從實現上來講，應該首先禁用垂直滾動，在判定用戶為垂直操作後激活該屬性，嗯，完美。但事實又一次打了我的臉，在事件中激活該屬性並不能激活垂直滾動效果。

那就反過來，首先激活垂直滾動，在判定水平操作後禁用該屬性。嗯，實踐證明該方法可行，但仍然有問題。在我們判定滑動方向之前，用戶很有可能在垂直方向有移動，雖然很微小，但依然會感受到頁麵的上下滾動。

下麵是我按照該思路實現的仿微信首頁效果

在後續的文章中，我會展示另一種實現該效果的方法，可以完美消除頁麵垂直滾動問題，不過仍然會有其它限製。

最後是源碼地址, 感興趣的同學可以下載體驗。

最後更新：2017-10-08 03:10:36