Implementing a simple progress bar on the mobile terminal

This time I will bring you a simple progress bar implementation on the mobile terminal. What are the notes for implementing a simple progress bar on the mobile terminal? The following is a practical case, let’s take a look.

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:

1. touchstart: Triggered when a finger touches the screen, even if there is already a finger on the screen.

2. touchmove: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.

3. touchend: Triggered when the finger leaves the screen.

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

1. touches: An array of touch objects representing the currently tracked touch operations.

2. targetTouches: Array of Touch objects specific to event targets.

3. changeTouches: An array of Touch objects that represent what has changed since the last touch.

Each touch object contains the following properties:

1. clientX: The x coordinate of the touch target in the viewport.

2. clientY: The y coordinate of the touch target in the viewport.

3. pageX: The x coordinate of the touch target in the page.

4. pageY: The y coordinate of the touch target in the page.

5. screenX: screenX: The x coordinate of the touch target in the screen.

6. screenY: screenX: The x coordinate of the touch target in the screen.

7. identifier: A unique ID that identifies the touch.

8. 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>

The 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('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth
let touchPoint = 0
let btnLeft = 0

Listen to the touchstart event

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

Listen to the touchmove event

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

Through a series of logical operations , our progress bar has been basically implemented, but we found a problem. 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
}

So far, a simple mobile scroll bar It’s achieved

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery fullpage plug-in adds header and tail copyright related

Vue.js development mpvue framework steps Detailed explanation

The above is the detailed content of Implementing a simple progress bar on the mobile terminal. For more information, please follow other related articles on the PHP Chinese website!