WeChat ミニプログラムで左スワイプ削除を実装する方法の詳細な説明

左スワイプして削除するエフェクトは、ユニバーサル アプリケーション WeChat などのアプリのインタラクション方法で非常に人気があります

WeChat 左スワイプして削除します

もう 1 つの例は、大きな反響を引き起こした効率化アプリ Clear です

クリア左スワイプ削除

技術的に言えば、スライド操作に応答してコンポーネントを移動し、座標計算を追加してステータスを記録するだけで、この効果を実現することは難しくありません。ミニプログラムでこの効果を実現する方法を紹介する記事もいくつかありますが、基本的に、これらの開発者は実際のマシンで詳細にテストしていないと確信しています。なぜなら、私の実践を通じて、完全に実現するのはほぼ不可能であることがわかったからです。ミニプログラムへのこの効果 ミッション可能。

これはすべて、アプレットのイベント メカニズムから始まります。スライド操作の場合、アプレットはイベントに応答する 2 つの方法、bind と catch を提供します。違いは、イベントのバブリングを防ぐかどうかにありますが、preventDefault メソッド。これは、プログラム内でのイベントのバブリングを防止するかどうかを動的に決定することが不可能であることを意味します。 bind和catch两种响应事件的方式，区别在于是否阻止事件冒泡，但却没有提供preventDefault 方法，也就是说无法在程序中动态确定是否阻止某个事件冒泡。

然后再说一下小程序的另一个特性，这个特性只在真机上有效，那就是框架默认为page提供了垂直方向的滚动效果，无需写一行代码，并且小程序还贴心的提供了onPullDownRefresh和onReachBottom,嗯，一切都很完美。

然后当这些特性遇到左滑效果，那就尴尬了。完美的左滑删除效果，当判定为水平滑动时，要忽略用户垂直方向上的移动(毕竟不能指望用户的手指不会上下抖动吧)。然而因为没有preventDefault方法，要么catch住滑动事件，要么你就只能期待用户的手指严格水平滑动了。

由于上述原因，在我见到的小程序中，几乎没有使用左滑删除操作的，说几乎是因为确实有一款实现了该效果，印象微笔记清单

印象微笔记清单

可以看到在左滑时页面也会同时上下滚动，体验并不好。(顺便说一句，印象微笔记清单早起版本使用scroll-view实现该效果，体验就更差了)

当然，也可以catch滑动事件，不过这样水平滑动时没问题，垂直滑动时你也不会看到任何反应了。

当我发现这些问题时感到十分沮丧，不过我想问题的核心就是要能动态阻止页面垂直滚动。而除了view之外，scroll-view也具备垂直滚动的能力，并且还有一个属性scroll-y     Boolean    false     允许纵向滚动。是的，我想你们也想到了，只要在合适的条件下动态设置该属性，那就应该可以实现想要的效果了。

从实现上来讲，应该首先禁用垂直滚动，在判定用户为垂直操作后激活该属性，嗯，完美。但事实又一次打了我的脸，在touchmove

次に、ミニ プログラムの別の機能について説明します。この機能は実際のデバイスでのみ有効です。つまり、フレームワークは、コードを 1 行も記述することなく、デフォルトでページに垂直スクロール効果を提供します。また、ミニ プログラムも同様です。 onPullDownRefresh と onReachBottom が慎重に提供されており、すべてが完璧です。

そして、これらの機能が左スライド効果に遭遇すると、恥ずかしい思いをするでしょう。完全な左スワイプの削除効果を得るには、水平スライドと判断された場合、ユーザーの垂直方向の動きは無視される必要があります (結局のところ、ユーザーの指が上下に震えないことは期待できません)。ただし、preventDefault メソッドがないため、スライド イベントをキャッチするか、ユーザーの指が厳密に水平にスライドすることを期待することしかできません。

上記の理由により、私がこれまでに見た小さなプログラムの中には、左スワイプによる削除操作がほとんどありませんでした。これは、この効果を実現するプログラムが存在するためです

感想マイクロノート一覧

がご覧いただけます左にスワイプすると、ページが同時に上下にスクロールしますが、これは良い経験ではありません。 (ちなみに、Impression Micro Notes リストの初期バージョンでは、この効果を実現するためにスクロール view を使用しており、エクスペリエンスはさらに悪くなります)

🎜 もちろん、スライド イベントをキャッチすることもできます。ただし、横にスライドする場合は問題ありません。また、縦にスワイプしても反応がありません。 🎜🎜これらの問題を発見したとき、私は非常にイライラしましたが、問題の核心はページの垂直スクロールを動的に防止できることだと思います。 view に加えて、scroll-view には垂直方向にスクロールする機能もあり、垂直方向のスクロールを可能にする属性 scroll-y Boolean false もあります。はい、あなたも考えたことがあると思いますが、このプロパティが適切な条件下で動的に設定されている限り、望ましい効果が達成されるはずです。 🎜🎜実装の観点からは、最初に垂直スクロールを無効にし、ユーザーが垂直方向に操作することを決定した後にアクティブにする必要があります。しかし、touchmove イベントでこのプロパティをアクティブにしても、垂直スクロール効果はアクティブにならないという事実に再び直面しました。 🎜🎜 次に、その逆を行い、最初に垂直スクロールを有効にし、水平方向の操作を決定した後、この属性を無効にします。実際、この方法が機能することは実践で証明されていますが、まだ問題があります。スライド方向を決定する前に、ユーザーは垂直方向に移動する可能性が高くなりますが、非常に小さいですが、ユーザーはページが上下にスクロールしているように感じます。 🎜🎜以下は、私がこのアイデアに基づいて実現したWeChatホームページの模倣効果です🎜🎜🎜🎜🎜🎜左にスワイプして削除してください🎜🎜以降の記事では、この効果を実現する別の方法を示します。これにより、垂直スクロールの問題を完全に解消できます。ページの を参照してください。ただし、他にも制限があります。 🎜

以上がWeChat ミニプログラムで左スワイプ削除を実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。