Cum să implementați derularea infinită în Vue

Defilarea infinită este o tehnică pe care o puteți folosi pentru a afișa mai mult conținut pe măsură ce utilizatorul aplicației dvs. derulează în jos pe pagină. Elimină nevoia de paginare și permite utilizatorilor aplicației să continue derularea prin seturi mari de date.

Configurarea aplicației dvs. Vue

Pentru a urma acest tutorial, aveți nevoie de o înțelegere de bază a Vue 3 și JavaScript. Ar trebui să știi cum să te descurci Solicitări HTTP cu Axios.

Pentru a începe să înveți cum implementați derularea infinită, creați o nouă aplicație Vue rulând următoarele npm comandă în directorul preferat:

npm create vue

În timpul configurării proiectului, Vue vă va solicita să selectați o presetare pentru aplicația dvs. Alege Nu pentru toate funcțiile, deoarece nu veți avea nevoie de adăugări la aplicația dvs.

După ce ați creat noua aplicație, navigați la directorul aplicației și rulați următoarele npm comanda pentru a instala pachetele necesare:

npm install axios @iconify/vue @vueuse/core

The npm comanda instalează trei pachete: axios (pentru cereri HTTP), @iconify/vue (pentru integrarea ușoară a pictogramelor în Vue), și @vueuse/core (oferind utilități esențiale Vue).

Vei folosi axios și @iconify/vue pentru a prelua date și pentru a adăuga pictograme aplicației dvs. @vueuse/core conține utilități Vue, inclusiv utilizați InfiniteScroll componentă pentru realizarea derulării infinite.

Preluarea datelor false din API-ul JSONPlaceholder

Pentru a implementa funcția de defilare infinită, aveți nevoie de date. Puteți fie să codificați aceste date, fie să obțineți date dintr-o sursă API falsă gratuită, cum ar fi JSONPlaceholder.

Obținerea acestor date de la JSONPlaceholder imită scenarii din viața reală, deoarece majoritatea aplicațiilor web obțin date din baze de date în loc de date codificate.

Pentru a prelua date din API pentru aplicația dvs. Vue, creați un dosar nou în dvs src director și denumește-l api. În acel folder, creați un nou fișier JavaScript și inserați următorul cod:

//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;

Fragmentul de cod constă într-o funcție asincronă pentru obținerea de comentarii de la punctul final API " https://jsonplaceholder.typicode.com/comments". Apoi exportă funcția.

Pentru a explica în continuare, fragmentul de cod începe cu importarea fișierului axios bibliotecă. Codul definește apoi getComments functie cu doua argumente: max și omite.

The getComments funcția găzduiește axios.get() metodă care face o solicitare GET către adresa URL. Adresa URL conține parametri de interogare max și omite, care sunt interpolate în șir folosind literale șablon (``). Acest lucru vă permite să treceți valori dinamice în adresa URL.

Funcția returnează apoi o nouă matrice constând din corp a comentariilor primite de la punctul final API folosind Hartă funcţie.

Dacă apare vreo eroare, fragmentul de cod îl înregistrează în consolă. Fragmentul de cod exportă apoi această funcție în alte părți ale aplicației dvs.

Acum că te-ai ocupat de logica pentru preluarea datelor false, poți crea o nouă componentă pentru a afișa datele fictive și pentru a gestiona funcția de defilare infinită.

Creați un fișier nou InfiniteScroll.vue în src/componente director și adăugați următorul cod: