Sådan implementeres uendelig scrolling i Vue

Uendelig rulning er en teknik, du kan bruge til at vise mere indhold, når din appbruger ruller ned på siden. Det eliminerer behovet for paginering og giver app-brugere mulighed for at fortsætte med at rulle gennem store datasæt.

Opsætning af din Vue-applikation

For at følge med i denne tutorial skal du have en grundlæggende forståelse af Vue 3 og JavaScript. Du skal vide, hvordan du skal håndtere HTTP-anmodninger med Axios.

For at begynde at lære at implementer uendelig rulning, opret en ny Vue-app ved at køre følgende npm kommando i din foretrukne mappe:

npm create vue

Under projektopsætningen vil Vue bede dig om at vælge en forudindstilling til din app. Vælge Ingen for alle funktioner, da du ikke behøver tilføjelser til din app.

Når du har oprettet den nye app, skal du navigere til appens bibliotek og køre følgende npm kommando for at installere de nødvendige pakker:

npm install axios @iconify/vue @vueuse/core

Det npm kommando installerer tre pakker: axios (for HTTP-anmodninger), @iconify/vue (for nem ikonintegration i Vue), og @vueuse/core (tilbyder væsentlige Vue-værktøjer).

Du vil bruge axios og @iconify/vue for at hente data og tilføje ikoner til din applikation. @vueuse/core indeholder Vue-værktøjer, herunder brug InfiniteScroll komponent for at opnå uendelig rulning.

Henter Dummy-data fra JSONPlaceholder API

For at implementere den uendelige rullefunktion har du brug for data. Du kan enten hårdkode disse data eller få data fra en gratis falsk API-kilde som f.eks JSONPlaceholder.

At få disse data fra JSONPlaceholder imiterer virkelige scenarier, da de fleste webapplikationer får data fra databaser i stedet for hårdkodede data.

For at hente data fra API'et til din Vue-applikation skal du oprette en ny mappe i din src mappe og navngiv den api. I den mappe skal du oprette en ny JavaScript-fil og indsætte følgende kode:

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

Kodestykket består af en asynkron funktion til at få kommentarer fra API-slutpunktet " https://jsonplaceholder.typicode.com/comments". Den eksporterer derefter funktionen.

For at forklare yderligere, starter kodestykket med at importere axios bibliotek. Koden definerer derefter få kommentarer funktion med to argumenter: max og udelade.

Det få kommentarer funktion huser den axios.get() metode, som laver en GET-anmodning til URL'en. URL'en indeholder forespørgselsparametre max og udelade, som er interpoleret i strengen ved hjælp af skabelonliteraler (``). Dette giver dig mulighed for at overføre dynamiske værdier til URL'en.

Funktionen returnerer derefter en ny matrix bestående af legeme af kommentarerne modtaget fra API-endepunktet ved hjælp af kort fungere.

Hvis der opstår en fejl, logger kodestykket det til konsollen. Kodestykket eksporterer derefter denne funktion til andre dele af din applikation.

Nu hvor du har håndteret logikken til at hente dummy-data, kan du oprette en ny komponent til at vise dummy-dataene og håndtere den uendelige rullefunktion.

Opret en ny fil InfiniteScroll.vue i src/komponenter bibliotek og tilføj følgende kode: