Dieses Mal bringe ich Ihnen eine einfache Implementierung des Fortschrittsbalkens auf dem mobilen Endgerät. Was sind die Vorsichtsmaßnahmen für die Implementierung eines einfachen Fortschrittsbalkens auf dem mobilen Endgerät? Praktischer Fall, werfen wir einen Blick darauf.
Vorwort
Viele neue Ereignisse wurden zu HTML hinzugefügt, aber aufgrund von Kompatibilitätsproblemen werden viele Ereignisse nicht häufig verwendet stellt einige nützliche mobile Touch-Ereignisse vor: touchstart, touchmove, touchend.
Einführung
Lassen Sie uns diese Ereignisse kurz vorstellen:
Touchstart: Wird ausgelöst, wenn ein Finger berührt auf dem Bildschirm, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.
touchmove: Wird kontinuierlich ausgelöst, wenn der Finger über den Bildschirm gleitet. Während dieses Ereignisses kann der Aufruf des Ereignisses „preventDefault()“ das Scrollen verhindern.
Touchend: Wird ausgelöst, wenn der Finger den Bildschirm verlässt.
Diese Berührungsereignisse haben gemeinsame Dom--Attribute . Darüber hinaus enthalten sie auch drei Attribute zum Verfolgen von Berührungen:
Berührungen: ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.
Praktischer Kampf
Lassen Sie uns Touch-Ereignisse verwenden, um einen verschiebbaren Fortschrittsbalken auf der mobilen Seite zu implementierenLassen Sie uns zuerst den HTML-Layout erstellen<p class="progress-wrapper"> <p class="progress"></p> <p class="progress-btn"></p> </p>
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
progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // 获取触摸的初始位置 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性 })
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 }
jquery Fullpage Plug-in fügt Header und Tail urheberrechtlich relevant hinzu
Vue.js Entwicklungsschritte mpvue-Framework Detaillierte Erklärung
Das obige ist der detaillierte Inhalt vonImplementierung eines einfachen Fortschrittsbalkens auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!