移動端完成容易進度條

前言

HTML中新添加了許多新的事件，但由于兼容性的問題,許多事件都沒有廣泛的應用，接下來為大家介紹一些好用的移動端觸摸事件: touchstart、touchmove、touchend。

介紹

下面我們來簡單介紹一下這幾個事件:

1. touchstart： 當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發。

2. touchmove：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動。

3. touchend：當手指從屏幕上離開的時候觸發。

這些觸摸事件具有常見的dom屬性。此外，他們還包含著三個用于跟蹤觸摸的屬性：

1. touches：表示當前跟蹤的觸摸操作的touch對象的數組。

2. targetTouches：特定于事件目標的Touch對象的數組。

3. changeTouches：表示自上次觸摸以來發生了什么改變的Touch對象的數組。

每個touch對象包含的屬性如下：

1. clientX：觸摸目標在視口中的x坐標。

2. clientY：觸摸目標在視口中的y坐標。

3. pageX：觸摸目標在頁面中的x坐標。

4. pageY：觸摸目標在頁面中的y坐標。

5. screenX：screenX：觸摸目標在屏幕中的x坐標。

6. screenY：screenX：觸摸目標在屏幕中的x坐標。

7. identifier：標識觸摸的唯一ID。

8. 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值與進度條容器長度的比值，計算進度條的長度百分比
})

通過一系列的邏輯運算，我們的進度條已經基本實現了，但是發現了一個問題，當觸摸位置超出進度條容器時，會產生bug，我們再來做一些限制

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

至此，一個簡單的移動端滾動條就實現了

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jquery fullpage插件添加頭部與尾部版權相關

Vue.js開發mpvue框架步驟詳解

以上就是移動端實現簡單進度條的詳細內容，更多請關注php中文網其它相關文章！