ホームページ > 記事 > ウェブフロントエンド > HTML5 タッチイベントを通じてモバイル側にシンプルなプログレスバーを実装する方法

HTML5 タッチイベントを通じてモバイル側にシンプルなプログレスバーを実装する方法

不言オリジナル: 2018-06-26 14:00:201656ブラウズ

この記事は主に、HTML5 タッチイベントを実装してモバイル端末にシンプルなプログレスバーを実装する方法に関する関連情報を紹介します。内容は非常に優れているので、参考として共有します。

はじめに

多くの新しいイベントが HTML に追加されましたが、互換性の問題により、多くのイベントは広く使用されていません。次に、いくつかの便利なモバイルタッチイベント、touchstart、touchmove、touchend を紹介します。

はじめに

これらのイベントを簡単に紹介しましょう:

touchstart: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。
touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。
touchend: 指が画面から離れるとトリガーされます。

これらのタッチイベントには共通の dom 属性があります。さらに、タッチを追跡するための 3 つのプロパティも含まれています:

touches: 現在追跡されているタッチ操作を表すタッチオブジェクトの配列。
targetTouches: イベントターゲットに固有の Touch オブジェクトの配列。
changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

各タッチオブジェクトには次のプロパティが含まれます:

clientX: ビューポート内のタッチターゲットの x 座標。
clientY: ビューポート内のタッチターゲットの y 座標。
pageX: ページ内のタッチターゲットのx座標。
pageY: ページ内のタッチターゲットの Y 座標。
screenX: screenX: 画面内のタッチターゲットのx座標。
screenY: screenX: 画面内のタッチターゲットのx座標。
識別子: タッチを識別する一意の ID。
target:screenX: 画面内のタッチターゲットのx座標。

タッチイベントの特徴を理解したら、エキサイティングな実践フェーズを始めましょう

実践的な戦闘

次に、タッチイベントを使用してモバイル側のスライド式プログレスバーを実装しましょう

まずはレイアウトから始めましょうHTML

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>

CSS部分は省略しています

dom要素を取得し、タッチ開始点とコンテナの左端からボタンまでの距離を初期化します

const progressWrapper = document.querySelector(&#39;.progress-wrapper&#39;)
const progress = document.querySelector(&#39;.progress&#39;)
const progressBtn = document.querySelector(&#39;.progress-btn&#39;)
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

聞いてくださいtouchstart イベント

progressBtn.addEventListener(&#39;touchstart&#39;, e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)[&#39;left&#39;], 10) // 此处忽略IE浏览器兼容性
})

touchmove イベントを聞く

progressBtn.addEventListener(&#39;touchmove&#39;, e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + &#39;px&#39;

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + &#39;%&#39; // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

一連の論理演算により、基本的にプログレスバーが実装されましたが、タッチ位置がプログレスを超える場合に問題が発見されました。 barコンテナ、バグが発生しますもう一度やってみましょういくつかの制限があります

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}

この時点で、シンプルなモバイルスクロールバーが実装されました

以上がこの記事の内容になります。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

HTML5 タッチ イベントを通じてモバイル側にシンプルなプログレス バーを実装する方法

関連記事

HTML5 タッチイベントを通じてモバイル側にシンプルなプログレスバーを実装する方法