左滑刪除效果在app的交互方式中十分流行，比如全民應用微信
再比如曾引起很大反響的效率app Clear
從技術上來說，實現這個效果並不困難，響應一下滑動操作，移動一下組件，再加上些坐標計算，狀態記錄就可以了。也有一些文章介紹了在小程序上如何實現這一效果，不過我基本可以確定這些開發者沒有在真機上詳細測試，因為經我實踐發現，在小程序上想要完美實現這個效果幾乎是不可能完成的任務。
這一切要從小程序的事件機制說起。對於滑動類操作，小程序提供了bind和catch兩種響應事件的方式，區別在於是否阻止事件冒泡，但卻沒有提供preventDefault 方法，也就是說無法在程序中動態確定是否阻止某個事件冒泡。
然后再說一下小程序的另一個特性，這個特性只在真機上有效，那就是框架默認為page提供了垂直方向的滾動效果，無需寫一行代碼，並且小程序還貼心的提供了onPullDownRefresh和onReachBottom,嗯，一切都很完美。
然后當這些特性遇到左滑效果，那就尷尬了。完美的左滑刪除效果，當判定為水平滑動時，要忽略用戶垂直方向上的移動(畢竟不能指望用戶的手指不會上下抖動吧)。然而因為沒有preventDefault方法，要么catch住滑動事件，要么你就只能期待用戶的手指嚴格水平滑動了。
由於上述原因，在我見到的小程序中，幾乎沒有使用左滑刪除操作的，說幾乎是因為確實有一款實現了該效果，印象微筆記清單
可以看到在左滑時頁面也會同時上下滾動，體驗並不好。(順便說一句，印象微筆記清單早起版本使用scroll-view實現該效果，體驗就更差了)
當然，也可以catch滑動事件，不過這樣水平滑動時沒問題，垂直滑動時你也不會看到任何反應了。
當我發現這些問題時感到十分沮喪，不過我想問題的核心就是要能動態阻止頁面垂直滾動。而除了view之外，scroll-view也具備垂直滾動的能力，並且還有一個屬性scroll-y Boolean false 允許縱向滾動。是的，我想你們也想到了，只要在合適的條件下動態設置該屬性，那就應該可以實現想要的效果了。
從實現上來講，應該首先禁用垂直滾動，在判定用戶為垂直操作后激活該屬性，嗯，完美。但事實又一次打了我的臉，在touchmove事件中激活該屬性並不能激活垂直滾動效果。
那就反過來，首先激活垂直滾動，在判定水平操作后禁用該屬性。嗯，實踐證明該方法可行，但仍然有問題。在我們判定滑動方向之前，用戶很有可能在垂直方向有移動，雖然很微小，但依然會感受到頁面的上下滾動。
下面是我按照該思路實現的仿微信首頁效果
在后續的文章中，我會展示另一種實現該效果的方法，可以完美消除頁面垂直滾動問題，不過仍然會有其它限制。
最后是源碼地址, 感興趣的同學可以下載體驗。小程序相關源碼及視頻教程下載
