모바일 단말에 간단한 진행 표시줄 구현

이번에는 모바일 단말기에서 간단한 진행률 표시줄을 구현하는 방법을 알려드리겠습니다. 모바일 단말기에서 간단한 진행률 표시줄을 구현하는 방법에 대한 주의 사항은 무엇입니까? 아래에서 실제 사례를 살펴보겠습니다. .

머리말

HTML에는 많은 새로운 이벤트가 추가되었지만 호환성 문제로 인해 널리 사용되지 않는 이벤트가 많습니다. 다음으로 유용한 모바일 터치 이벤트인 touchstart, touchmove, touchend를 소개하겠습니다.

Introduction

이러한 이벤트를 간략하게 소개하겠습니다.

1. touchstart: 이미 화면에 손가락이 있어도 손가락이 화면을 터치하면 트리거됩니다.

2. touchmove: 손가락이 화면을 미끄러질 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault() 이벤트를 호출하면 스크롤을 방지할 수 있습니다.

3. touchend: 손가락이 화면에서 벗어날 때 트리거됩니다.

이러한 터치 이벤트에는 공통된 dom속성이 있습니다. 또한 터치 추적을 위한 세 가지 속성도 포함되어 있습니다.

1. 터치: 현재 추적되는 터치 작업을 나타내는 터치 개체 의 배열입니다.

2. targetTouches: 이벤트 대상과 관련된 터치 개체 배열입니다.

3. changeTouches: 마지막 터치 이후 변경된 사항을 나타내는 Touch 개체의 배열입니다.

각 터치 개체에는 다음 속성이 포함되어 있습니다.

1. clientX: 뷰포트에 있는 터치 대상의 X 좌표입니다.

2. clientY: 뷰포트에서 터치 대상의 y 좌표입니다.

3. pageX: 페이지에 있는 터치 대상의 x 좌표입니다.

4. pageY: 페이지에서 터치 대상의 y 좌표입니다.

5. screenX: screenX: 화면 내 터치 대상의 x 좌표입니다.

6. screenY: screenX: 화면 내 터치 대상의 x 좌표입니다.

7. 식별자: 터치를 식별하는 고유 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值与进度条容器长度的比值，计算进度条的长度百分比
})

일련의 논리 연산을 통해 기본적으로 진행률 표시줄이 구현되었지만 터치 위치가 진행률 표시줄 컨테이너를 초과하면 버그가 발생합니다.

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

이 시점에서, 간단한 모바일 스크롤바가 구현되었습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jquery 전체 페이지 플러그인으로 헤더 및 테일 저작권 관련 추가

Vue.js 개발 mpvue 프레임워크 단계 자세한 설명

위 내용은 모바일 단말에 간단한 진행 표시줄 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!