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

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

はじめに

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

はじめに

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

1. touchstart: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。

2. touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。

3. touchend: 指が画面から離れるとトリガーされます。

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

1. touches: 現在追跡されているタッチ操作を表すタッチ オブジェクトの配列。

2. targetTouches: イベントターゲットに固有の Touch オブジェクトの配列。

3. changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

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

1. clientX: ビューポート内のタッチ ターゲットの x 座標。

2. clientY: ビューポート内のタッチ ターゲットの y 座標。

3. pageX: ページ内のタッチターゲットのx座標。

4. pageY: ページ内のタッチターゲットの Y 座標。

5. screenX: screenX: 画面内のタッチターゲットのx座標。

6. screenY: screenX: 画面内のタッチターゲットのx座標。

7. 識別子: タッチを識別する一意の ID。

8. target:screenX: 画面内のタッチターゲットのx座標。

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

実践的な戦闘

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

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

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

CSS部分は省略しています

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

const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

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

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

touchmove イベントを聞く

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]

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

    touch.target.style.left = btnLeftStyle + 'px'

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

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

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

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

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

関連推奨事項:

タッチスクリーンページの上下スライドを実現するhtml5タッチイベント

携帯端末賞を受賞したHTML5モバイル端末のシームレススクロールアニメーションを実現

以上がHTML5 タッチ イベントを通じてモバイル側にシンプルなプログレス バーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。