Comment implémenter une simple barre de progression côté mobile via des événements tactiles HTML5

Cet article présente principalement les informations pertinentes sur la façon d'implémenter des événements tactiles HTML5 pour implémenter une simple barre de progression sur le terminal mobile. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Préface

De nombreux nouveaux événements ont été ajoutés au HTML, mais en raison de problèmes de compatibilité, de nombreux événements ne sont pas largement utilisés. Ensuite, je. présentera quelques événements tactiles mobiles utiles : touchstart, touchmove, touchend.

Introduction

Présentons brièvement ces événements :

1. touchstart : déclenché lorsqu'un doigt touche l'écran, même s'il y a déjà un doigt sur l'écran.

2. touchmove : Déclenché en continu lorsque le doigt glisse sur l'écran. Lors de cet événement, l'appel de l'événement PreventDefault() peut empêcher le défilement.

3. touchend : déclenché lorsque le doigt quitte l'écran.

Ces événements tactiles ont des attributs dom communs. De plus, ils contiennent également trois attributs pour le suivi des touches :

1. touches : un tableau d'objets tactiles représentant les opérations tactiles actuellement suivies.

2. targetTouches : Tableau d'objets Touch spécifiques à la cible de l'événement.

3. changeTouches : un tableau d'objets Touch indiquant ce qui a changé depuis le dernier contact.

Chaque objet tactile contient les propriétés suivantes :

1. clientX : La coordonnée x de la cible tactile dans la fenêtre.

2. clientY : La coordonnée y de la cible tactile dans la fenêtre.

3. pageX : La coordonnée x de la cible tactile dans la page.

4. pageY : La coordonnée y de la cible tactile dans la page.

5. screenX : screenX : La coordonnée x de la cible tactile dans l'écran.

6. screenY : screenX : La coordonnée x de la cible tactile dans l'écran.

7. identifiant : un identifiant unique qui identifie le toucher.

8. target: screenX : La coordonnée x de la cible tactile dans l'écran.

Maintenant que vous comprenez les caractéristiques des événements tactiles, commençons la passionnante séance pratique

Combat pratique

Utilisons les événements tactiles pour implémenter une barre de progression coulissante côté mobile

Définissons d'abord le HTML

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

La partie CSS est omise ici

Récupérez l'élément dom et initialisez le point de départ du toucher et la distance du bouton depuis le coin le plus à gauche du conteneur

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

Écoutez l'événement touchstart

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

Écoutez l'événement 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值与进度条容器长度的比值，计算进度条的长度百分比
})

Grâce à une série d'opérations logiques, notre barre de progression a été essentiellement implémentée, mais un problème a été découvert lorsque la position tactile dépasse le conteneur de la barre de progression, un bug se produit. >

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

À ce stade, une simple barre de défilement mobile a été implémentée

Ce qui précède représente l'intégralité du contenu de cet article, je l'espère. sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez visiter le site Web Follow PHP Chinese !

Recommandations associées :

L'événement tactile HTML5 réalise un glissement de haut en bas de la page de l'écran tactile

Prix du terminal mobile HTML5- animation de défilement transparente gagnante Mettre en œuvre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!