モバイル端末にシンプルなプログレスバーを実装する

今回は、モバイル端末に簡単なプログレスバーを実装する方法について説明します。以下に、実際的なケースを見てみましょう。 。

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

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

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

属性

があります。さらに、タッチを追跡するための 3 つのプロパティも含まれています:

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

   の配列。

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('.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值与进度条容器长度的比值，计算进度条的长度百分比
})

一連の論理操作により、プログレスバーは基本的に実装されましたが、タッチ位置がプログレスバーのコンテナを超えるとバグが発生することが判明しました

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

著作権関連のヘッダーと末尾を追加する jquery フルページ プラグイン

Vue.js 開発 mpvue フレームワーク手順の詳細な説明

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