Vue3 で単純な WeChat 右スワイプ削除ロジックを実装する方法

1. シンプルなページを構築します

対応するコード、インターフェイスは tailwindCSS を使用します、コードは非常に単純で、通常の配置です。キーの位置は黄色で囲まれています。 right の値は divdelete の幅です。他のスタイルについては、ここでは詳しく説明しません。

2. 前提条件

まずアイデアを整理しましょう。

まず、削除ボタンコンポーネントに ref というラベルを付ける必要があります。これは、この div のインスタンスを使用する必要があるためです。後で。 (wrapperref はコードを最適化するだけなので、当面は必要ありません) ここでは、TouchEvent イベントを使用する必要があり、テストします。ブラウザの開発者ツールでその効果を確認するには、携帯電話に適応モードを調整する必要があります。

2 つのネイティブ イベント @touchstart と @touchend をこの # の と friends にバインドします。 ##div。ここで混同しないでください。これら 2 つのイベントは @click イベントと同じであり、js ネイティブ イベントです。これは独自のカスタム イベントではなく、ユーザーが画面上で = を押したことを検出すると、$event が相対関数パラメータに自動的に渡されます。

3. タッチスタート機能の設計

その前に、

注: # について説明します。 ## ユーザーが 1 本の指だけを使用する状況を考慮する必要があるのはなぜでしょうか? まず、渡された

event

イベント オブジェクトがどのようなプロパティを持っているかを出力しましょう。

ここで最も重要な属性はこの

changedTouches

属性で、その値は配列です。まず、MDN がこの属性をどのように説明しているかを見てみましょう。

#少し抽象的ですよね?このナンセンスが実際に何を意味するのか説明しましょう。 まず、このプロパティが配列である理由を理解する必要があります。指が画面に触れると、ブラウザはその時点で何本の指が画面に触れたかをキャプチャします。この値に基づいて、いくつかの異なる判断を下すことができます。最も単純な例は、配列

changedTouches.length

が 1 であると仮定すると、これは 1 本の指で画面に触れただけであることを意味し、関数

if(changedTouches.length>0 && changedTOuches.length<2)
{
TODO...
}

を設計するときに判断できます。ユーザーがタッチした指の数に基づいて、対応する指の操作を実行できます。タッチパッドを使用したことがある人なら、2 本の指、1 本の指、3 本の指

などがすべて異なるイベントに対応していることを知っています。実際、このプロパティが配列として設計されている理由がわかります。

ここでは、ユーザーが 1 本の指だけで画面にタッチし、スライドする状況のみを考慮します。

以下のコードに対応して、ユーザーが最初に画面に触れた時点を取得しました。ここで、この

touchPoint

がどのような属性を持っているかを確認する必要があります。

#このオブジェクトの最も重要な属性は、丸で囲んだ属性です。

追加スキルの補足 clientX

および

clientY まず、MDN がそれをどのように説明しているかを見てみましょう。

ここでは、この文を理解することに重点を置く必要があります。 必ずこれを理解してください --> ページが水平にスクロールするかどうかに関係なく (垂直スクロールは clientY に対応します)

ここでは絵を使って話します。ここでの赤い矢印の点は ユーザーがタッチしたときに取得される点の座標

と黄色の矢印が指す距離を表します矢印は

clientX です。

そして clientY

言うまでもなく、この距離です

ヒント: ここでの距離は左上隅の座標 (0, 0) を基準にしており、これは設計時のデフォルトのルールです

pageX と pageY

これら 2 つは現在使用していませんが、ここで詳しく説明します。まずはMDNの説明を見てみましょう。

ここでも、scrolling という 2 つの単語を理解することに重点を置きます。これが clientX との最も核心的な違いだからです。

このページを表示できないため、例として MDN からページをインターセプトしました。

これは初期インターフェイスです。ここで、pageX および pageY が ## と同じであることがわかります。 #clientX と clienY は、開始点がページの左上隅であり、ページがまだスクロールされていないため、まったく同じです。

しかし、一定の距離を下にスクロールした後、

200px までスクロールするとします。

現時点では、

pageY の開始点は、上の赤い線の距離だけではなく、依然として前のページの開始点です。つまり、実際の pageY は 赤い線の距離 200px に等しくなります (X 軸にオフセットしていないため、pageX は依然として元の値）。

clientY

を理解していれば、現時点では pageY=clientY 200px であることがわかります。

screenX

と screenY これら 2 つのプロパティは、日常の開発では基本的に使用されません。

#図で表すと次のようになります。

画面が大きくなったら:

わかりました。関連する事前知識はすでにわかっています。ここで、ユーザーがマークをクリックしたときの clientX

の値を取得できます。

#4. タッチエンド関数の設計

#最初に全体のコードを配置します、そしてそれをステップごとに説明します。

まず、ユーザーが操作した特定の

div

を取得する必要があります。なぜなら、最終的には滑ってしまうものだからです。

その後、

touchStart イベントと同様に、ユーザーがタッチしてリリースすると、配列データ

changedTouches

も記録されます。 。

わかりやすいです。

touchStartX-touchEndX ユーザーがどれだけスライドしたかを把握できます。

ここではしきい値が必要です。これは、ユーザーが本当にこのタッチで左にスライドして削除ボタンを表示して操作したいかどうかを確認するために使用されます。人間で言えば、ユーザーが画面をタップしただけでしょうか? したがって、ここでは単純にユーザーの移動距離が指定したしきい値より大きいかどうかを判断する必要があります。大きい場合は、ユーザーがこの操作を行ったと判断します。そうでない場合は、スライド イベント無視されます。

# 判断して操作を行う

#上記は dom を直接操作して機能を実現するだけですが、私たちはもっとエレガントになれる このモバイルの問題を解決するには、読者が独自の考えを持ち込んでそれを達成する必要があります。

5.過剰なアニメーションを追加する

成功しました~

##思考の質問:

My

delBtnInitMoveDistance は削除ボタンが最初に移動した距離を意味します。計算された値を教えていただけますか?なぜコードを最適化できるのでしょうか?

以上がVue3 で単純な WeChat 右スワイプ削除ロジックを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。