左滑刪除效果在app的交互方式中十分流行噩峦，比如全民應(yīng)用微信
再比如曾引起很大反響的效率app Clear
從技術(shù)上來說，實(shí)現(xiàn)這個效果并不困難，響應(yīng)一下滑動操作鳍置，移動一下組件，再加上些坐標(biāo)計(jì)算送淆，狀態(tài)記錄就可以了税产。也有一些文章介紹了在小程序上如何實(shí)現(xiàn)這一效果，不過我基本可以確定這些開發(fā)者沒有在真機(jī)上詳細(xì)測試偷崩，因?yàn)榻?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)判定為水平滑動時，要忽略用戶垂直方向上的移動(畢竟不能指望用戶的手指不會上下抖動吧)鸠项。然而因?yàn)闆]有preventDefault方法干跛，要么catch住滑動事件，要么你就只能期待用戶的手指嚴(yán)格水平滑動了祟绊。
由于上述原因楼入，在我見到的小程序中，幾乎沒有使用左滑刪除操作的牧抽，說幾乎是因?yàn)榇_實(shí)有一款實(shí)現(xiàn)了該效果嘉熊，印象微筆記清單
可以看到在左滑時頁面也會同時上下滾動，體驗(yàn)并不好扬舒。(順便說一句阐肤，印象微筆記清單早起版本使用scroll-view實(shí)現(xiàn)該效果，體驗(yà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)該效果的方法须肆，可以完美消除頁面垂直滾動問題，不過仍然會有其它限制脐往。
最后是源碼地址, 感興趣的同學(xué)可以下載體驗(yàn)休吠。
