Ein nützliches mobiles Scrolling-Plugin BetterScroll

Autor: Didi Webapp-Architekturteam - Fu Nan

BetterScroll ist ein Open-Source-Plug-In (GitHub-Adresse), das sich auf die Lösung verschiedener Anforderungen an Scroll-Szenarien auf Mobilgeräten konzentriert. Es eignet sich für Anwendungsszenarien wie Scroll-Listen, Selektoren, Karussells, Indexlisten und Anleitungen zum Öffnen von Bildschirmen.

Um diesen Szenarien gerecht zu werden, unterstützt es nicht nur die flexible Konfiguration von Trägheitsscrollen, Boundary Rebound, Ein- und Ausblendeffekten der Bildlaufleiste, um das Scrollen flüssiger zu gestalten, sondern bietet auch viele API-Methoden und -Ereignisse, sodass wir die Anforderungen von Scroll-Szenarien, wie etwa Pulldown-Aktualisierung und Pullup-Laden, schneller realisieren können.

Da es auf Basis von nativem JavaScript implementiert ist und nicht auf einem Framework basiert, kann es von nativem JavaScript referenziert oder in Kombination mit dem aktuellen Front-End-MVVM-Framework verwendet werden. Beispielsweise wird das Beispiel auf der offiziellen Website mit Vue kombiniert.

Sehen wir uns zunächst an, wie das Scrollen dadurch flüssiger wird.

Machen Sie das Scrollen flüssiger

Wenn Sie auf Mobilgeräten „overflow: scroll“ zum Generieren eines Bildlaufcontainers verwendet haben, werden Sie feststellen, dass das Scrollen eher ruckartig und träge erfolgt. Warum passiert das?

Denn wir sind schon lange an das Scroll-Erlebnis der aktuellen Mainstream-Betriebssysteme und Browserfenster gewöhnt. Beispielsweise gibt es beim Scrollen zum Rand einen Rückstoß, und der Finger scrollt nach dem Aufhören des Gleitens durch Trägheit noch eine Weile weiter. Wenn der Finger schnell gleitet, scrollt auch die Seite schnell. Dieser native Scroll-Container verfügt nicht darüber, sodass die Leute sich festgefahren fühlen.

BetterScroll-Scroll-Erlebnis

Probieren Sie BetterScroll aus. Erlebnisadresse

Es zeigt sich, dass es nach dem Hinzufügen von Trägheitsscrollen, Kantenrückprall und anderen Effekten deutlich flüssiger und komfortabler läuft. Also, wie werden diese Effekte erzielt?

Trägheitsrollen

BetterScroll scrollt noch eine Weile weiter, wenn der Benutzer den Wischvorgang beendet hat. Schauen wir uns zunächst die Funktion BScroll.prototype._end im Quellcode an. Dies ist die Verarbeitungsfunktion für die Ereignisse touchend, mouseup, touchcancel und mousecancel. Dies ist die Logik, wenn der Scrollvorgang des Benutzers endet.

BScroll.prototype._end = Funktion (e) {
    ...
    wenn (this.options.momentum && Dauer < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {
      lass momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, Dauer, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)
        : {Ziel: newX, Dauer: 0}
      lass momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, Dauer, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)
        : {Ziel: neues Jahr, Dauer: 0}
      neuesX = momentumX.ziel
      neuesY = momentumY.ziel
      Zeit = Math.max(ImpulsX.Dauer, ImpulsY.Dauer)
      this.isInTransition = 1
    }
    ...
}

Der Zweck des obigen Codes besteht darin, mithilfe der Momentum-Funktion die Trägheitsbildlaufdistanz und den Zeitpunkt zu berechnen, an dem die Gleitoperation des Benutzers endet, falls das Trägheitsbildlauf aktiviert werden muss. Diese Funktion berechnet die Scroll-Distanz basierend auf der Gleitgeschwindigkeit des Benutzers und der Verzögerungsoption - Trägheitsverzögerung. Was die Scroll-Zeit betrifft, ist dies ebenfalls eine konfigurierbare Option.

Funktion Momentum (aktuell, Start, Zeit, unterer Rand, Wrappergröße, Optionen) {  
  ...
  sei Distanz = aktuell - Start
  sei Geschwindigkeit = Math.abs(Entfernung) / Zeit
  ...
  let Dauer = SwipeTime
  sei Ziel = Strom + Geschwindigkeit / Verzögerung * (Entfernung < 0 ? -1 : 1)
  ...
}

Kantenrückprall

Beim Überschreiten der Kante gibt es zwei Verarbeitungsschritte für den Rückprall: Der erste Schritt besteht darin, die Geschwindigkeit beim Scrollen über die Grenze hinaus zu verlangsamen, und der zweite Schritt besteht darin, zur Grenze zurückzuprallen. Der erste Schritt befindet sich in der Funktion BScroll.prototype._move im Quellcode. Dabei handelt es sich um die Verarbeitungsfunktion für Touchmove- und Mousemove-Ereignisse, also die Logik während der Gleitbewegung des Benutzers.

// Verlangsamen oder anhalten, wenn außerhalb der Grenzen
wenn (neuesY > 0 || neuesY < this.maxScrollY) {
    wenn (diese.Optionen.Bounce) {
        neuesY = dieses.y + deltaY / 3
    } anders {
        neuesY = neuesY > 0 ? 0 : this.maxScrollY
    }
}

Der zweite Schritt besteht darin, die Funktion BScroll.prototype.resetPosition aufzurufen, um zur Grenze zurückzukehren.

BScroll.prototype.resetPosition = Funktion (Zeit = 0, Beschleunigung = Beschleunigung.Abprall) {
    ...
    sei y = dies.y
    wenn (!this.hasVerticalScroll || y > 0) {
      y = 0
    } sonst wenn (y < this.maxScrollY) {
      y = dies.maxScrollY
    }
    ...
    this.scrollTo(x, y, Zeit, Beschleunigung)
    ...
  }

Reibungsloses Scrollen ist nur die Grundlage. Die wahre Stärke von BetterScoll liegt darin, eine große Anzahl allgemeiner/benutzerdefinierter Optionen, API-Methoden und Ereignisse bereitzustellen, um verschiedene Scroll-Anforderungen effizienter zu gestalten.

So bewerben Sie sich für verschiedene Nachfrageszenarien

Als Nächstes sprechen wir am Beispiel von Vue über BetterScroll in verschiedenen Szenarien.

Normale Bildlaufliste

Beispielsweise gibt es folgende Liste:

<div ref="Wrapper" Klasse="Listen-Wrapper">
  <ul Klasse="Listeninhalt">
    <li @click="clickItem($event,item)" class="list-item" v-for="item in data">{{item}}</li>
  </ul>
</div>

Wir möchten, dass es vertikal scrollt, also müssen wir nur eine einfache Initialisierung des Containers durchführen.

BScroll von „better-scroll“ importieren

const Optionen = {
  scrollY: true // Da scrollY standardmäßig auf true gesetzt ist, kann es weggelassen werden}

 
this.scroll = neues BScroll(this.$refs.wrapper, Optionen)

Bei der Verwendung von BetterScroll in Vue muss ein Punkt beachtet werden. Da das Listen-DOM-Element nicht generiert wird, wenn die Listendarstellung in der Vue-Vorlage nicht abgeschlossen ist, kann die BScroll-Instanz erst erstellt werden, nachdem sichergestellt wurde, dass die Listendarstellung abgeschlossen ist. Daher ist in Vue der beste Zeitpunkt zum Initialisieren von BScroll der nächste Tick von mouted.

// Stellen Sie in Vue sicher, dass BScroll initialisiert wird, wenn die Listendarstellung abgeschlossen ist
montiert() {
   setzeTimeout(() => {
     this.scroll = neues BScroll(this.$refs.wrapper, Optionen)
   }, 20)
},

Nach der Initialisierung kann der Wrapper-Container ordnungsgemäß scrollen und die von der BScroll-Instanz this.scroll bereitgestellten API-Methoden und -Ereignisse können verwendet werden.

Nachfolgend sind einige häufig verwendete Optionen, Methoden und Ereignisse aufgeführt.

Bildlaufleisten

Mit der Option „Bildlaufleiste“ wird die Bildlaufleiste konfiguriert. Der Standardwert ist „false“. Wenn der Wert auf „true“ oder ein Objekt gesetzt ist, wird die Bildlaufleiste aktiviert. Mit der Eigenschaft „fade“ können Sie außerdem konfigurieren, ob die Bildlaufleiste beim Scrollen ein- und ausgeblendet wird oder angezeigt bleibt.

// fade ist standardmäßig auf true eingestellt, Bildlaufleiste wird ein- und ausgeblendet options.scrollbar = true

// Die Bildlaufleiste wird immer angezeigt options.scrollbar = {
  verblassen: falsch
}

this.scroll = neues BScroll(this.$refs.wrapper, Optionen)

Informationen zu bestimmten Effekten finden Sie unter „Normale Bildlaufliste – Beispiel“.

Zum Aktualisieren nach unten ziehen

Mit der Option „puldownRefresh“ wird die Pulldown-Aktualisierungsfunktion konfiguriert. Wenn auf true oder ein Objekt gesetzt, ist die Pulldown-Aktualisierung aktiviert. Sie können die Pulldown-Distanz (Schwellenwert) konfigurieren, um den Aktualisierungszeitpunkt und die Rückprallstoppdistanz (Stopp) zu bestimmen.

Optionen.pullDownRefresh = {
  Schwellenwert: 50, // Wenn der Pulldown 50 Pixel vom oberen Rand überschreitet, wird das PullingDown-Ereignis ausgelöst. Stopp: 20 // Während des Datenaktualisierungsprozesses bleibt der Rebound an einer Position, die 20 Pixel vom oberen Rand entfernt ist}

this.scroll = neues BScroll(this.$refs.wrapper, Optionen)

Hören Sie auf das PullingDown-Ereignis und aktualisieren Sie die Daten. Rufen Sie nach dem Aktualisieren der Daten die Methode finishPullDown() auf, um zur oberen Grenze zurückzukehren.

dies.scroll.on('pullingDown', () => {
  // Während des Datenaktualisierungsprozesses bleibt der Rebound 20px vom oberen Rand entfernt RefreshData()
    .then((neueDaten) => {
      diese.Daten = neueDaten
      // Rufen Sie nach dem Aktualisieren der Daten die Methode finishPullDown auf, um wieder nach oben zu springen this.scroll.finishPullDown()
  })
})

Informationen zu bestimmten Effekten finden Sie unter „Normale Bildlaufliste – Beispiel“.

Pull-Up-Laden

Mit der Option „pullUpLoad“ wird die Pull-Up-Ladefunktion konfiguriert. Wenn der Wert auf „True“ oder ein Objekt gesetzt ist, kann das Pull-Up-Laden aktiviert und der Abstandsschwellenwert vom Boden konfiguriert werden, um zu bestimmen, wann mit dem Laden begonnen werden soll.

Optionen.pullUpLoad = {
  Schwellenwert: -20 // Wenn der Pull-Up-Bereich 20 Pixel vom unteren Rand überschreitet, wird das Pull-Up-Ereignis ausgelöst}

this.scroll = neues BScroll(this.$refs.wrapper, Optionen)

Hören Sie auf das PullingUp-Ereignis und laden Sie neue Daten.

dies.scroll.on('nach oben ziehen', () => {
  loadData()
    .then((neueDaten) => {
      diese.Daten.push(neueDaten)
  })
})

Informationen zu bestimmten Effekten finden Sie unter „Normale Bildlaufliste – Beispiel“.

Wähler

Mit der Radoption wird der Selektor aktiviert und konfiguriert. Sie können den aktuell ausgewählten Index des Selektors (selectedIndex), die Krümmung der Liste (rotate) und die Anpassungszeit (adjustTime) zum Umschalten ausgewählter Elemente konfigurieren.

Optionen.Rad = {
  ausgewählter Index: 0,
  drehen: 25,
  Anpassungszeit: 400
}

// Initialisiere jede Spalte des Selektors this.wheels[i] = new BScroll(wheelWrapper.children[i], options)

Weitere Einzelheiten finden Sie unter „Selektor – Beispiel“.

Der Verknüpfungsselektor muss die Auswahl jeder Auswahlliste überwachen, um andere Auswahllisten zu ändern.

Daten() {
   zurückkehren {
     Temperaturindex: [0, 0, 0]
   }
},
...
// Auf die Auswahl jeder Auswahlliste warten this.wheels[i].on('scrollEnd', () => {
  this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex())
})
...
// Den Inhalt anderer Auswahllisten anhand der aktuell berechneten Auswahl bestimmen: {
  linkageData() {
    const Provinzen = Provinzliste
    const Städte = Städteliste[Provinzen[this.tempIndex[0]].Wert]
    const Bereiche = Bereichsliste[Städte[this.tempIndex[1]].Wert]

    Rückkehr [Provinzen, Städte, Gebiete]
  }
},

Weitere Informationen finden Sie unter „Selektor – Verknüpfter Selektor im Beispiel“.

Karussell

Mit der Snap-Option können Sie das Karussell aktivieren und konfigurieren. Sie können konfigurieren, ob die Diashow in einer Schleife abgespielt wird (Loop), die Breite (StepX) und Höhe (StepY) jeder Seite, den Umschaltschwellenwert (Threshold) und die Umschaltgeschwindigkeit (Speed).

Optionen = {
  scrollX: wahr,
  Schnappschuss: {
    loop: true, // Loop-Wiedergabe starten stepX: 200, // Jede Seite ist 200px breit
    stepY: 100, // Jede Seitenhöhe beträgt 100px
    Schwellenwert: 0,3, // Bilder wechseln, wenn die Scrolldistanz 30 % der Breite/Höhe überschreitet. Geschwindigkeit: 400 // Dauer der Animation 400 ms
  }
}

this.slide = BScroll(this.$refs.slide, Optionen)

Spezifische Effekte finden Sie unter „Diashow – Beispiel“.

Besondere Szenarien

Zusätzlich zu grundlegenden Bildlaufszenarien wie gewöhnlichen Bildlauflisten, Selektoren und Karussells können Sie die von BetterScroll bereitgestellten Funktionen auch für einige spezielle Szenarien nutzen.

Indexliste

Die Indexliste muss zunächst in Echtzeit überwachen, zu welchem ​​Indexbereich während des Scrollvorgangs gescrollt wird, um den aktuellen Index zu aktualisieren. In diesem Szenario können wir die Option probeType verwenden. Wenn diese Option auf 3 gesetzt ist, werden Scroll-Ereignisse während des gesamten Scroll-Vorgangs in Echtzeit ausgelöst. Dadurch bleibt die Position während des Scrollvorgangs erhalten.

Optionen.Probetyp = 3
this.scroll = neues BScroll(this.$refs.wrapper, Optionen)

dies.scroll.on('scroll', (pos) => {
  const y = pos.y

  für (lass i = 0; i < Listenhöhe.Länge - 1; i++) {
    let Höhe1 = Listenhöhe[i]
    let Höhe2 = Listenhöhe[i + 1]
    if (-y >= Höhe1 && -y < Höhe2) {
      dies.aktuellerIndex = i
    }
  }
})

Wenn Sie auf einen Index klicken, verwenden Sie die Methode scrollToElement(), um zu diesem Indexbereich zu blättern.

scrollTo(index) {
  dies.$refs.indexList.scrollToElement(dies.$refs.listGroup[index], 0)
}

Weitere Einzelheiten finden Sie unter „Indexliste – Beispiel“.

Bildschirmanleitung öffnen

Die Anleitung auf dem Startbildschirm ist eigentlich nur ein horizontal scrollendes Karussell, das nicht automatisch wiederholt wird.

Optionen = {
  scrollX: wahr,
  Schnappschuss: {
    Schleife: falsch
  }
}

this.slide = BScroll(this.$refs.slide, Optionen)

Informationen zu spezifischen Effekten finden Sie in der Anleitung zum Startbildschirm – Beispiel. Da dieses Nachfrageszenario grundsätzlich nur auf mobilen Geräten verfügbar ist, lässt sich die Wirkung am besten im mobilen Modus betrachten.

Freies Scrollen

Mit der Option „freeScroll“ wird freies Scrollen aktiviert. Dabei ist sowohl horizontales als auch vertikales Scrollen möglich, ohne auf eine bestimmte Richtung beschränkt zu sein.

options.freeScroll = true

Beachten Sie auch, dass diese Option keine Wirkung hat, wenn eventPassthrough so eingestellt ist, dass das native Scrollen beibehalten wird.

Informationen zu spezifischen Effekten finden Sie unter „Free Scrolling – Beispiel“.

Zusammenfassung

BetterScroll kann in fast allen Scroll-Szenarien verwendet werden. Dieser Artikel stellt nur seine Verwendung in einigen typischen Szenarien vor.

Als Plug-In, das die Scroll-Anforderungen mobiler Geräte erfüllen soll, bietet BetterScroll zahlreiche Optionen, Methoden und Ereignisse, die es uns tatsächlich ermöglichen, das Scrollen schneller, flexibler und präziser zu handhaben.

Dies ist das Ende dieses Artikels über ein nützliches mobiles Scroll-Plug-in namens BetterScroll. Weitere verwandte Inhalte zum mobilen Scroll-Plug-in BetterScroll finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!