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