clear左滑刪除
從技術上來說，實現這個效果並不困難，響應一下滑動操作，移動一下元件，再加上些座標計算，狀態記錄就可以了。也有一些文章介紹了在小程式上如何實現這一效果，不過我基本可以確定這些開發者沒有在真機上詳細測試，因為經我實踐發現，在小程式上想要完美實現這個效果幾乎是不可能完成的任務。
這一切要從小程式的事件機制說起。對於滑動類操作，小程式提供了bind和catch兩種響應事件的方式，區別在於是否阻止事件冒泡，但卻沒有提供preventdefault方法，也就是說無法在程式中動態確定是否阻止某個事件冒泡。
然後再說一下小程式的另乙個特性，這個特性只在真機上有效，那就是框架預設為page提供了垂直方向的滾動效果，無需寫一行**，並且小程式還貼心的提供了onpulldownrefresh和onreachbottom,嗯，一切都很完美。
然後當這些特性遇到左滑效果，那就尷尬了。完美的左滑刪除效果，當判定為水平滑動時，要忽略使用者垂直方向上的移動(畢竟不能指望使用者的手指不會上下抖動吧)。然而因為沒有preventdefault方法，要麼catch住滑動事件，要麼你就只能期待使用者的手指嚴格水平滑動了。
由於上述原因，在我見到的小程式中，幾乎沒有使用左滑刪除操作的，說幾乎是因為確實有一款實現了該效果，印象微筆記清單
印象微筆記清單
可以看到在左滑時頁面也會同時上下滾動，體驗並不好。(順便說一句，印象微筆記清單早起版本使用scroll-view實現該效果，體驗就更差了)
當然，也可以catch滑動事件，不過這樣水平滑動時沒問題，垂直滑動時你也不會看到任何反應了。
當我發現這些問題時感到十分沮喪，不過我想問題的核心就是要能動態阻止頁面垂直滾動。而除了view之外，scroll-view也具備垂直滾動的能力，並且還有乙個屬性scroll-y boolean false 允許縱向滾動。是的，我想你們也想到了，只要在合適的條件下動態設定該屬性，那就應該可以實現想要的效果了。
從實現上來講，應該首先禁用垂直滾動，在判定使用者為垂直操作後啟用該屬性，嗯，完美。但事實又一次打了我的臉，在touchmove事件中啟用該屬性並不能啟用垂直滾動效果。
那就反過來，首先啟用垂直滾動，在判定水平操作後禁用該屬性。嗯，實踐證明該方法可行，但仍然有問題。在我們判定滑動方向之前，使用者很有可能在垂直方向有移動，雖然很微小，但依然會感受到頁面的上下滾動。
左滑刪除
在後續的文章中，我會展示另一種實現該效果的方法，可以完美消除頁面垂直滾動問題，不過仍然會有其它限制。
微信小程式左滑刪除
view class touch item data index wx for wx key view class content view style class item data index bindtouchstart touchstart bindtouchmove touchmove b...
微信小程式 左滑刪除效果
1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...
微信小程式左滑效果
container touch item data index bindtouchstart touchstart bindtouchmove touchmove wx for wx key content del catchtap del data index 刪除 複製 touch item c...