Implémentation d'une barre de progression simple sur le terminal mobile

Cette fois, je vais vous proposer une implémentation simple de la barre de progression sur le terminal mobile. Quelles sont les précautions pour implémenter une simple barre de progression sur le terminal mobile. cas pratique, jetons un coup d'oeil.

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 les attributs communs dom . De plus, ils contiennent également trois attributs pour le suivi des touches :

1. touches : un tableau d'objets tactiles représentant l'opération tactile actuellement suivie.

2. targetTouches : Tableau d'objets Touch spécifiques aux cibles d'é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

Nous présentons 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 entre le bouton à l'extrême 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. faire quelques restrictions

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Le plug-in jquery fullpage ajoute des en-têtes et des queues liés aux droits d'auteur

Étapes de développement de Vue.js Framework mpvue Explication détaillée

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!