모바일 단말에 간단한 진행 표시줄 구현-HTML 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-05-07 17:39:36

원래의

10004명이 탐색했습니다.

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

머리말

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

Introduction

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

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

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

터치: 현재 추적되는 터치 작업을 나타내는 터치 개체 의 배열입니다.
targetTouches: 이벤트 대상과 관련된 터치 개체 배열입니다.
changeTouches: 마지막 터치 이후 변경된 사항을 나타내는 Touch 개체의 배열입니다.

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

clientX: 뷰포트에 있는 터치 대상의 X 좌표입니다.
clientY: 뷰포트에서 터치 대상의 y 좌표입니다.
pageX: 페이지에 있는 터치 대상의 x 좌표입니다.
pageY: 페이지에서 터치 대상의 y 좌표입니다.
screenX: screenX: 화면 내 터치 대상의 x 좌표입니다.
screenY: screenX: 화면 내 터치 대상의 x 좌표입니다.
식별자: 터치를 식별하는 고유 ID입니다.
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 중국어 웹사이트의 다른 관련 기사를 주목하세요!