タッチ インターフェイスを強力にサポートするために、タッチ イベントは、タッチ スクリーンまたはタッチ パッド上のユーザー操作に応答する機能を提供します。
インタフェースタッチイベントTouchEvent は、タッチ面 (タッチ スクリーン、タッチ パッドなど) 上の指の状態変化を記述するイベントの一種です。このタイプのイベントは 1 つ以上のタッチ ポイントを記述するために使用され、開発者がタッチ ポイントの移動、タッチ ポイントの増減などを検出できるようにします。各 Touch オブジェクトはタッチ ポイントを表し、各タッチ ポイントはその位置、サイズ、形状、圧力レベル、およびターゲット要素によって記述されます。 TouchList オブジェクトは、複数のタッチ ポイントのリストを表します。
タッチイベントの種類タッチ関連の状態変化を区別するために、複数の種類のタッチ イベントがあります。現在のイベントのタイプを確認するには、タッチ イベントの TouchEvent.type プロパティを確認します。
基本原理は、スライド開始(touchStart)とスライド終了(touchEnd)の座標位置を記録し、相対位置を計算することです。
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY }、touchEnd:function(e){ const that =これ; endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; let 方向 = that.GetSlideDirection(startX, startY, endX, endY); (方向) { ケース 0: console.log (スライディングなし); ケース 2: console.log (ダウン); 3: console.log(left); case 4: console.log(right); デフォルト: Break; // 開始点と終了に従って方向 1: を返します。 point : 左、4: 右、0: スライドなし GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dx = endX - startX; 0; //スライド距離が短すぎる場合 if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } let angle = that.GetSlideAngle(dx, dy);角度 > = -45 && 角度 < 45) { 結果 = 4; else if (角度 >= 45 && 角度 < 135) { 結果 = 1; -135 && 角度 < -45) { 結果 = 2; } else if ((角度 >= 135 && 角度 <= 180) || (角度 >= -180 && 角度 < -135)) { 結果 = 3; result; }, //角度を返します GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI;ネイティブJSメソッドH5 の新しいメソッドに加えて、ネイティブ JS を使用してビューのスライド方向を決定することもできます。コードは次のとおりです (直接実行できます)。
chrome は常に document.body.scrollTop を 0 に設定しているため、document.documentElement.scrollTop に変更する必要があることに注意してください。
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { border: 1px 無地幅: 200px; : 100px; オーバーフロー: スクロール; } </style></head><body style=overflow:scroll><h1>こんにちは。単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1> <h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1> <h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1> <h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1> <h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちはという言葉</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1><h1>こんにちは単語</h1> <h1>Hello ワード</h1><h1>Hello ワード</h1><h1>Hello ワード</h1><h1>Hello ワード</h1><script> 関数スクロール( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop) { var afterScrollTop = document .documentElement.scrollTop、デルタ = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); if( delta === 0 ) return false; fn( delta > 0 ? beforeScrollTop ); false); } スクロール(関数(方向) { console.log(方向) });</script></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。