How to implement a simple progress bar on the mobile side through HTML5 touch events-H5 Tutorial-php.cn

How to implement a simple progress bar on the mobile side through HTML5 touch events

不言

Release： 2018-06-26 14:00:20

Original

1843 people have browsed it

This article mainly introduces the relevant information on how to implement HTML5 touch events to implement a simple progress bar on the mobile terminal. The content is quite good. I will share it with you now and give it as a reference.

Preface

Many new events have been added to HTML, but due to compatibility issues, many events are not widely used. Next, I will introduce some useful mobile touch events: touchstart, touchmove, touchend.

Introduction

Let’s briefly introduce these events:

touchstart: Triggered when a finger touches the screen, even if there is already a finger on the screen.
touchmove: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.
touchend: Triggered when the finger leaves the screen.

These touch events have common dom attributes. In addition, they also contain three properties for tracking touches:

touches: An array of touch objects representing the currently tracked touch operations.
targetTouches: Array of Touch objects specific to event targets.
changeTouches: An array of Touch objects that represent what has changed since the last touch.

Each touch object contains the following properties:

clientX: The x coordinate of the touch target in the viewport.
clientY: The y coordinate of the touch target in the viewport.
pageX: The x coordinate of the touch target in the page.
pageY: The y coordinate of the touch target in the page.
screenX: screenX: The x coordinate of the touch target in the screen.
screenY: screenX: The x coordinate of the touch target in the screen.
identifier: A unique ID that identifies the touch.
target: screenX: The x coordinate of the touch target in the screen.

After understanding the characteristics of touch events, let’s start the exciting actual combat session

Practical combat

Let’s use touch events to implement a sliding progress bar on the mobile side

Let’s lay out the HTML first

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

Copy after login

CSS part is omitted here

Get the dom element, and initialize the touch starting point and the distance between the button and the leftmost part of the container

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

Copy after login

Listen to touchstart Event

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

Copy after login

Listen to touchmove event

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

Copy after login

Through a series of logical operations, we The progress bar has been basically implemented, but a problem has been discovered. When the touch position exceeds the progress bar container, a bug will occur. Let's make some restrictions

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

Copy after login

So far, a simple mobile scroll bar has been realized

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

html5 touch event realizes sliding up and down the touch screen page

Html5 mobile terminal award-winning seamless scrolling animation accomplish

The above is the detailed content of How to implement a simple progress bar on the mobile side through HTML5 touch events. For more information, please follow other related articles on the PHP Chinese website!