Uendelig rulling kommer godt med når du trenger å vise store datasett i applikasjonen din. Lær hvordan du implementerer det i Vue.
Uendelig rulling er en teknikk du kan bruke til å vise mer innhold når appbrukeren din ruller nedover siden. Det eliminerer behovet for paginering og lar appbrukere fortsette å bla gjennom store datasett.
Sette opp Vue-applikasjonen din
For å følge med på denne opplæringen trenger du en grunnleggende forståelse av Vue 3 og JavaScript. Du bør vite hvordan du skal håndtere HTTP-forespørsler med Axios.
For å begynne å lære hvordan implementer uendelig rulling, opprett en ny Vue-app ved å kjøre følgende npm kommando i din foretrukne katalog:
npm create vue
Under prosjektoppsettet vil Vue be deg om å velge en forhåndsinnstilling for appen din. Velge Nei for alle funksjoner, siden du ikke trenger noen tillegg til appen din.
Når du har opprettet den nye appen, naviger til appens katalog og kjør følgende npm kommando for å installere de nødvendige pakkene:
npm install axios @iconify/vue @vueuse/core
De npm kommandoen installerer tre pakker: aksioer (for HTTP-forespørsler), @iconify/vue (for enkel ikonintegrasjon i Vue), og @vueuse/core (tilbyr viktige Vue-verktøy).
Du vil bruke aksioer og @iconify/vue for å hente data og legge til ikoner i applikasjonen din. @vueuse/core inneholder Vue-verktøy, inkludert bruk InfiniteScroll komponent for å oppnå uendelig rulling.
Henter Dummy-data fra JSONPlaceholder API
For å implementere funksjonen for uendelig rulling, trenger du data. Du kan enten hardkode disse dataene eller hente data fra en gratis falsk API-kilde som JSONPlassholder.
Å få disse dataene fra JSONPlaceholder imiterer virkelige scenarier, ettersom de fleste nettapplikasjoner henter data fra databaser i stedet for hardkodede data.
For å hente data fra API for Vue-applikasjonen din, opprette en ny mappe i din src katalog og navngi den api. Opprett en ny JavaScript-fil i den mappen og lim inn følgende kode:
//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;
Kodebiten består av en asynkron funksjon for å få kommentarer fra API-endepunktet " https://jsonplaceholder.typicode.com/comments". Den eksporterer deretter funksjonen.
For å forklare nærmere, starter kodebiten med å importere aksioer bibliotek. Koden definerer deretter få kommentarer funksjon med to argumenter: maks og utelate.
De få kommentarer funksjonen huser axios.get() metode som sender en GET-forespørsel til URL-en. URL-en inneholder søkeparametere maks og utelate, som er interpolert i strengen ved hjelp av malliteraler (``). Dette lar deg sende dynamiske verdier inn i URL-en.
Funksjonen returnerer deretter en ny matrise bestående av kropp av kommentarene mottatt fra API-endepunktet ved hjelp av kart funksjon.
Hvis det oppstår en feil, logger kodebiten den til konsollen. Kodebiten eksporterer deretter denne funksjonen til andre deler av applikasjonen din.
Nå som du har håndtert logikken for å hente dummy-data, kan du opprette en ny komponent for å vise dummy-dataene og håndtere den uendelige rullefunksjonen.
Opprett en ny fil InfiniteScroll.vue i src/komponenter katalog og legg til følgende kode:
