Praktisches Beispiel einer virtuellen Vue-Liste

Vorwort

Heutzutage wischen wir ununterbrochen. Schauen Sie sich Weibo an, schauen Sie sich Tik Tok an, schauen Sie sich Boiling Point an ... Hinter jedem reibungslosen Scroll-Erlebnis steckt das Engagement der Front-End-Ingenieure.

In diesem Artikel wird die Praxis unendlicher Dropdown-Listen auf Basis von Vue.js erläutert.

Unser Ziel besteht darin, den Pulldown-Prozess der Liste reibungslos zu gestalten, anstatt wie bisher darauf warten zu müssen, dass die Liste geladen wird.

• Übersetzt aus Better Programming
• Online Demo

Design

Verwenden wir Vue CLI, um das Projekt schnell zu erstellen.

Dies ist die Hauptseite:

// EndlessList.vue

<Vorlage>
 <div Klasse="endlose-scrolling-list">
  <!-- Suchfeld -->
  <div Klasse="Suchfeld">
   <input type="text" v-model="Suchanfrage"/>
  </div>
  <p class="center" v-if="results.length == 0 && !loading">
   Beginnen Sie mit der Eingabe, um nach etwas zu suchen.
  </p>
  <!-- Virtuelle Liste -->
  <virtuelle Liste
   :data-key="'Seiten-ID'"
   :data-sources="Ergebnisse"
   :Datenkomponente="Artikelkomponente"
   :Seitenmodus="true"
   />
  <!-- wird geladen -->
  <loader v-if="wird geladen" />
 </div>
</Vorlage>

Der Kern ist natürlich die virtuelle Listenkomponente ~

Für die virtuelle Liste hier verwenden wir eine Drittanbieterbibliothek namens Vue Virtual Scroll List, die auf Github über 2,5.000 Sterne hat. Analog zur react-virtualized-Bibliothek von React.

Eine große Anzahl von DOM-Elementen würde unsere Webseiten sehr „schwer“ machen. Wenn der DOM 1500–2000 Elemente überschreitet, kommt es zu Verzögerungen auf der Seite, insbesondere auf kleinen, langsamen Geräten.

Stellen Sie sich vor, es gibt eine Seite, auf der Sie unendlich scrollen können. Wenn Sie weiter nach unten scrollen, können tatsächlich Zehntausende von DOM-Elementen entstehen, von denen jedes untergeordnete Knoten enthält, was eine enorme Leistung beansprucht.

Virtuelle Scroller sollen dieses Problem lösen.

Wie im Bild oben zu sehen ist, wurde es klar zum Ausdruck gebracht. Die Liste ist in einen sichtbaren Bereich und einen Pufferbereich unterteilt. Alle Listen-DOMs außerhalb dieses Bereichs werden gelöscht.

Okay, die Vorbereitungen sind abgeschlossen, los geht‘s!

erreichen

// imports.js (EndlessList.vue)

importiere Axios von „Axios“;
importiere lodash von „lodash“;
importiere VirtualList aus „vue-virtual-scroll-list“;
Suchergebnis aus „./SearchResult“ importieren;
importiere Loader aus „./Loader“;
Standard exportieren {
 Name: 'EndlessList',
 Komponenten:
  Virtuelle Liste,
  Lader
 },
 Daten() {
  zurückkehren {
   Suchanfrage: '',
   aktuelleSeite: 0,
   Ergebnisse: [],
   itemComponent: Suchergebnis,
   wird geladen: false
  }
 },
};

Wir stellen die Drittanbieterbibliotheken axios und loadsh zur späteren Verwendung vor.

Unter diesen ist itemComponent eine Eigenschaft der virtuellen Liste, daher müssen wir eine neue SearchResult-Unterkomponente als Suchergebniseinheit erstellen.

Der Code lautet wie folgt:

// Suchergebnis.vue

<Vorlage>
 <div Klasse="Listenelement">
  <h3>
   {{ Quelle.Titel }}
  </h3>
  <div v-html="Quelle.snippet"></div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
  Index: {
   // Index des aktuellen Elements
   Typ: Nummer,
  },
  Quelle: {
   Typ: Objekt,
   Standard() {
    zurückkehren {};
   },
  },
 },
};
</Skript>

<Stilbereich>
.Listenelement {
 Polsterung: 0 10px 20px 10px;
}
.Listenelement h3 {
 Rand: 0;
 Polsterung unten: 10px;
}
</Stil>

Wir können Ergebnisse erhalten, indem wir nach Titeln oder Beschreibungen suchen, und die Anforderungsdaten stammen aus Wikipedia.

Suche(Abfrage, Seite) {
 // Wir bereiten die Daten vor, die die Wikipedia-API erwartet.
 const Daten = {
  Aktion: "Abfrage",
  Format: "json",
  Liste: "Suche",
  weiter: "-||",
  utf8: 1,
  srsearch: Abfrage,
  sroffset: Seite * 10,
  Herkunft: "*",
 };
 // Und dann konvertieren wir diese Parameter, um Parameter im Format
 // Aktion=Abfrage&Format=json …
 const params = Objekt.keys(Daten)
  .map(Funktion(k) {
   Rückgabewert [k] == ""
    ? ""
    : encodeURIComponent(k) + "=" + encodeURIComponent(Daten[k]);
  })
  .verbinden("&");
 // Wir bereiten die URL mit dem Parameterstring vor
 const searchUrl = `https://en.wikipedia.org/w/api.php?${params}`;
 //wir setzen loading auf true, damit wir den Loader anzeigen können 
 dies.laden = wahr;
 // Dann führen wir die Anfrage aus und verketten die Ergebnisse
 axios.get(Such-URL).then((Antwort) => {
  dies.Ergebnisse = dies.Ergebnisse.concat(response.data.query.search);
  // Und natürlich „loading“ auf „false“ setzen, um den Loader auszublenden.
  dies.laden = falsch;
 });
}

Die Suchmethode wurde geschrieben und der nächste Schritt besteht darin, sie aufzurufen.

1. Dies wird aufgerufen, wenn der Benutzer eine Suche eingibt.
2. Es wird aufgerufen, wenn Sie nach unten ziehen.
   

// EndlessList.vue

<Skript>
Standard exportieren {
 // data() und Methoden wurden der Kürze halber weggelassen
 betrachten:
  Suchanfrage: {
   sofort: wahr,
   Handler: lodash.debounce(Funktion (neuer Wert) {
    wenn (neuerWert == "") {
     zurückkehren;
    }
    dies.Ergebnisse = [];
    diese.aktuelleSeite = 0;
    diese.Suche(neuerWert, diese.aktuelleSeite);
    diese.Suche(neuerWert, diese.aktuelleSeite + 1);
    diese.aktuelleSeite = 2;
   }, 200),
  },
 },
 montiert() {
  const vm = dies;
  Fenster.OnScroll = lodash.Debounce(Funktion () {
   var AbstandVonUnten =
    Dokument.Body.Scrollhöhe - Fenster.Innenhöhe - Fenster.ScrollY;
   wenn (AbstandVonUnten < 400 && vm.searchQuery !== "") {
    vm.search(vm.Suchabfrage, vm.aktuelleSeite);
    vm.currentPage++;
   }
  }, 100, {führend: true});
 },
}
</Skript>

Wenn sich die Suchanfrage ändert, erhalten wir natürlich neue Suchergebnisse. Natürlich nutzt auch hier das Eingabefeld die Anti-Shake-Funktion.

Zu beachten ist außerdem, dass bei unserer ersten Suche zwei Seiten mit Ergebnissen geladen wurden, damit der Benutzer etwas Platz zum Scrollen hat und das Ganze flüssig bleibt.

Wir haben dem Scroll-Ereignis außerdem eine Anti-Shake-Funktion hinzugefügt. Hier ist eine Frage: Warum sollten wir „leading“ im window.onscroll-Ereignis auf „true“ setzen?

Dann führen wir das Programm aus, um die Wirkung zu sehen:

npm-Ausführung dev

Wie? Solange man nicht wie verrückt nach unten scrollt, spürt man den Ladevorgang praktisch nicht ~

Zusammenfassung

Benutzer möchten nicht jedes Mal, wenn sie zehn Ergebnisse nach unten scrollen, warten, bis zehn neue Ergebnisse geladen sind! Wir benötigen also einen Puffer, um den Boden vorherzusagen, bevor er nach unten gezogen wird, und ihn im Voraus zu laden. Dies ist der Kern des seidigen Erlebnisses.

Natürlich werden alle DOM-Elemente gelöscht, die sich nicht im Ansichtsbereich und im Puffer befinden. Dies ist auch der Sinn und Zweck der Vermeidung einer großen Anzahl von DOM-Elementen auf der Seite.

Eine solche dynamische Listenverarbeitung ist tatsächlich ein Beweis für die Weisheit und Sorgfalt der Programmierer.

Sie können das Projekt lokal klonen und ausprobieren. Das Obige ist dieses Teilen ~

Oben sind die Details des Implementierungsbeispiels der virtuellen Vue-Liste aufgeführt. Weitere Informationen zur virtuellen Vue-Liste finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!