更深層講解微信小程式實作左滑刪除

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

#微信左滑刪除

#再例如曾經引起很大反響的效率app Clear

Clear左滑刪除

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

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

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

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

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

#印象微筆記清單

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

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

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

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

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

下面是我按照這個想法實現的仿微信首頁效果

#左滑刪除

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

以上是更深層講解微信小程式實作左滑刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章！