Implementierung eines einfachen Fortschrittsbalkens auf dem mobilen Endgerät

php中世界最好的语言
Freigeben: 2018-05-07 17:39:36
Original
9994 Leute haben es durchsucht

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:

  1. Touchstart: Wird ausgelöst, wenn ein Finger berührt auf dem Bildschirm, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.

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

  3. 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:

  1. Berührungen: ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.

  2. targetTouches: Array von Touch-Objekten, die für Ereignisziele spezifisch sind.

  3. changeTouches: Ein Array von Touch-Objekten, das angibt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften:

  1. clientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.

  2. clientY: Die y-Koordinate des Berührungsziels im Ansichtsfenster.

  3. pageX: Die x-Koordinate des Berührungsziels auf der Seite.

  4. pageY: Die Y-Koordinate des Berührungsziels auf der Seite.

  5. screenX: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

  6. screenY: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

  7. Kennung: Eine eindeutige ID, die die Berührung identifiziert.

  8. target: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

Da Sie nun die Eigenschaften von Berührungsereignissen verstanden haben, beginnen wir mit der spannenden praktischen Sitzung

Praktischer Kampf

Lassen Sie uns Touch-Ereignisse verwenden, um einen verschiebbaren Fortschrittsbalken auf der mobilen Seite zu implementieren

Lassen Sie uns zuerst den HTML-Layout erstellen

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>
Nach dem Login kopieren
Der CSS-Teil wird hier weggelassen

Get das dom-Element und initialisieren Sie den Berührungsstartpunkt und den Abstand zwischen der Schaltfläche und dem äußersten linken Teil des Containers

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
Nach dem Login kopieren
Hören Sie sich das Touchstart-Ereignis an

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
})
Nach dem Login kopieren
Hören Sie sich das Touchmove-Ereignis an

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值与进度条容器长度的比值,计算进度条的长度百分比
})
Nach dem Login kopieren
Durch eine Reihe logischer Operationen wurde unser Fortschrittsbalken grundsätzlich implementiert, aber wir haben ein Problem festgestellt, wenn die Berührungsposition den Fortschrittsbalken-Container überschreitet, wird ein Fehler auftreten

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}
Nach dem Login kopieren
An diesem Punkt ist eine einfache mobile Bildlaufleiste erreicht.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!