Unendliches Scrollen ist praktisch, wenn Sie große Datensätze in Ihrer Anwendung anzeigen müssen. Erfahren Sie, wie Sie es in Vue implementieren.
Unendliches Scrollen ist eine Technik, mit der Sie mehr Inhalte anzeigen können, während Ihr App-Benutzer auf der Seite nach unten scrollt. Es macht eine Paginierung überflüssig und ermöglicht App-Benutzern, weiterhin durch große Datensätze zu scrollen.
Einrichten Ihrer Vue-Anwendung
Um diesem Tutorial folgen zu können, benötigen Sie grundlegende Kenntnisse von Vue 3 und JavaScript. Man sollte wissen, wie man damit umgeht HTTP-Anfragen mit Axios.
Um zu lernen, wie es geht Implementieren Sie unendliches Scrollen, erstellen Sie eine neue Vue-App, indem Sie Folgendes ausführen npm Befehl in Ihrem bevorzugten Verzeichnis:
npm create vue
Während der Projekteinrichtung werden Sie von Vue aufgefordert, eine Voreinstellung für Ihre App auszuwählen. Wählen NEIN für alle Funktionen, da Sie keine Ergänzungen zu Ihrer App benötigen.
Nachdem Sie die neue App erstellt haben, navigieren Sie zum Verzeichnis der App und führen Sie Folgendes aus
npm Befehl zum Installieren der erforderlichen Pakete:npm install axios @iconify/vue @vueuse/core
Der npm Der Befehl installiert drei Pakete: Axios (für HTTP-Anfragen), @iconify/vue (zur einfachen Icon-Integration in Vue), Und @vueuse/core (bietet wichtige Vue-Dienstprogramme).
Du wirst benutzen Axios Und @iconify/vue um Daten abzurufen und Symbole zu Ihrer Anwendung hinzuzufügen. @vueuse/core enthält Vue-Dienstprogramme, einschließlich der benutzeInfiniteScroll Komponente zum Erzielen eines unendlichen Scrollens.
Abrufen von Dummy-Daten von der JSONPlaceholder-API
Um die Funktion zum unendlichen Scrollen zu implementieren, benötigen Sie Daten. Sie können diese Daten entweder fest codieren oder Daten von einer kostenlosen gefälschten API-Quelle wie z. B. abrufen JSONPlaceholder.
Das Abrufen dieser Daten von JSONPlaceholder ahmt reale Szenarien nach, da die meisten Webanwendungen Daten aus Datenbanken und nicht aus fest codierten Daten beziehen.
Um Daten von der API für Ihre Vue-Anwendung abzurufen, erstellen Sie einen neuen Ordner in Ihrem src Verzeichnis und benennen Sie es API. Erstellen Sie in diesem Ordner eine neue JavaScript-Datei und fügen Sie den folgenden Code ein:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
exportdefault getComments;
Das Code-Snippet besteht aus einer asynchronen Funktion zum Abrufen von Kommentaren vom API-Endpunkt " https://jsonplaceholder.typicode.com/comments". Anschließend wird die Funktion exportiert.
Zur weiteren Erläuterung: Das Code-Snippet beginnt mit dem Importieren von Axios Bibliothek. Der Code definiert dann die getComments Funktion mit zwei Argumenten: max Und auslassen.
Der getComments Funktion beherbergt die axios.get() Methode, die eine GET-Anfrage an die URL stellt. Die URL enthält Abfrageparameter max Und auslassen, die mithilfe von Vorlagenliteralen innerhalb der Zeichenfolge interpoliert werden (``). Dadurch können Sie dynamische Werte in die URL übergeben.
Die Funktion gibt dann ein neues Array zurück, bestehend aus Körper der Kommentare, die vom API-Endpunkt über die empfangen wurden Karte Funktion.
Wenn ein Fehler auftritt, protokolliert das Code-Snippet ihn in der Konsole. Das Code-Snippet exportiert diese Funktion dann in andere Teile Ihrer Anwendung.
Nachdem Sie nun die Logik zum Abrufen von Dummy-Daten gehandhabt haben, können Sie eine neue Komponente erstellen, um die Dummy-Daten anzuzeigen und die Funktion zum unendlichen Scrollen zu verwalten.
Erstellen Sie eine neue Datei InfiniteScroll.vue im src/components Verzeichnis und fügen Sie den folgenden Code hinzu:
