Πώς να εφαρμόσετε την άπειρη κύλιση στο Vue

Η άπειρη κύλιση είναι μια τεχνική που μπορείτε να χρησιμοποιήσετε για να εμφανίσετε περισσότερο περιεχόμενο καθώς ο χρήστης της εφαρμογής σας κάνει κύλιση προς τα κάτω στη σελίδα. Εξαλείφει την ανάγκη για σελιδοποίηση και επιτρέπει στους χρήστες εφαρμογών να συνεχίσουν την κύλιση σε μεγάλα σύνολα δεδομένων.

Ρύθμιση της εφαρμογής Vue σας

Για να ακολουθήσετε αυτό το σεμινάριο, χρειάζεστε μια βασική κατανόηση του Vue 3 και της JavaScript. Θα πρέπει να ξέρετε πώς να χειριστείτε Αιτήματα HTTP με το Axios.

Για να αρχίσετε να μαθαίνετε πώς να εφαρμογή άπειρης κύλισης, δημιουργήστε μια νέα εφαρμογή Vue εκτελώντας τα παρακάτω npm εντολή στον κατάλογο που προτιμάτε:

npm create vue

Κατά τη ρύθμιση του έργου, το Vue θα σας ζητήσει να επιλέξετε μια προεπιλογή για την εφαρμογή σας. Επιλέγω Οχι για όλες τις δυνατότητες, καθώς δεν θα χρειαστείτε καμία προσθήκη στην εφαρμογή σας.

Αφού δημιουργήσετε τη νέα εφαρμογή, μεταβείτε στον κατάλογο της εφαρμογής και εκτελέστε τα παρακάτω npm εντολή για την εγκατάσταση των απαραίτητων πακέτων:

npm install axios @iconify/vue @vueuse/core

ο npm Η εντολή εγκαθιστά τρία πακέτα: αξιος (για αιτήματα HTTP), @iconify/vue (για εύκολη ενσωμάτωση εικονιδίων στο Vue), και @vueuse/core (προσφέροντας βασικά βοηθητικά προγράμματα Vue).

θα χρησιμοποιήσετε αξιος και @iconify/vue για να ανακτήσετε δεδομένα και να προσθέσετε εικονίδια στην εφαρμογή σας. @vueuse/core περιέχει βοηθητικά προγράμματα Vue, συμπεριλαμβανομένων των χρήση InfiniteScroll συστατικό για την επίτευξη άπειρης κύλισης.

Λήψη εικονικών δεδομένων από το JSONPlaceholder API

Για να εφαρμόσετε τη λειτουργία άπειρης κύλισης, χρειάζεστε δεδομένα. Μπορείτε είτε να κωδικοποιήσετε σκληρά αυτά τα δεδομένα είτε να λάβετε δεδομένα από μια δωρεάν ψεύτικη πηγή API όπως JSONPlaceholder.

Η λήψη αυτών των δεδομένων από το JSONPlaceholder μιμείται σενάρια πραγματικής ζωής, καθώς οι περισσότερες εφαρμογές Ιστού λαμβάνουν δεδομένα από βάσεις δεδομένων αντί για δεδομένα με σκληρό κώδικα.

Για να ανακτήσετε δεδομένα από το API για την εφαρμογή Vue, δημιουργήστε έναν νέο φάκελο στον φάκελο src κατάλογο και ονομάστε τον api. Σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο JavaScript και επικολλήστε τον ακόλουθο κώδικα:

//getComments.js
import 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;

Το απόσπασμα κώδικα αποτελείται από μια ασύγχρονη συνάρτηση για τη λήψη σχολίων από το τελικό σημείο του API " https://jsonplaceholder.typicode.com/comments". Στη συνέχεια εξάγει τη συνάρτηση.

Για να εξηγήσουμε περαιτέρω, το απόσπασμα κώδικα ξεκινά με την εισαγωγή του αξιος βιβλιοθήκη. Ο κώδικας ορίζει στη συνέχεια το λάβετε σχόλια συνάρτηση με δύο ορίσματα: Μέγιστη και παραλείπω.

ο λάβετε σχόλια λειτουργία στεγάζει το axios.get() μέθοδο που κάνει ένα αίτημα GET στη διεύθυνση URL. Η διεύθυνση URL περιέχει παραμέτρους ερωτήματος Μέγιστη και παραλείπω, τα οποία παρεμβάλλονται εντός της συμβολοσειράς χρησιμοποιώντας κυριολεκτικά πρότυπα (``). Αυτό σας επιτρέπει να μεταβιβάσετε δυναμικές τιμές στη διεύθυνση URL.

Στη συνέχεια, η συνάρτηση επιστρέφει έναν νέο πίνακα που αποτελείται από το σώμα των σχολίων που λαμβάνονται από το τελικό σημείο API χρησιμοποιώντας το χάρτης λειτουργία.

Εάν παρουσιαστεί κάποιο σφάλμα, το απόσπασμα κώδικα το καταγράφει στην κονσόλα. Στη συνέχεια, το απόσπασμα κώδικα εξάγει αυτήν τη συνάρτηση σε άλλα μέρη της εφαρμογής σας.

Τώρα που έχετε χειριστεί τη λογική για την ανάκτηση εικονικών δεδομένων, μπορείτε να δημιουργήσετε ένα νέο στοιχείο για να εμφανίσετε τα εικονικά δεδομένα και να χειριστείτε τη λειτουργία άπειρης κύλισης.

Δημιουργήστε ένα νέο αρχείο InfiniteScroll.vue στο src/components κατάλογο και προσθέστε τον ακόλουθο κώδικα: