Oändlig rullning är praktiskt när du behöver visa stora datamängder i din applikation. Lär dig hur du implementerar det i Vue.
Oändlig rullning är en teknik som du kan använda för att visa mer innehåll när din appanvändare rullar ner på sidan. Det eliminerar behovet av paginering och tillåter appanvändare att fortsätta bläddra igenom stora datamängder.
Konfigurera din Vue-applikation
För att följa med i denna handledning behöver du en grundläggande förståelse för Vue 3 och JavaScript. Du borde veta hur du ska hantera HTTP-förfrågningar med Axios.
Att börja lära sig hur man implementera oändlig rullning, skapa en ny Vue-app genom att köra följande npm kommandot i din föredragna katalog:
npm create vue
Under projektinställningen kommer Vue att uppmana dig att välja en förinställning för din app. Välja Nej för alla funktioner, eftersom du inte behöver några tillägg till din app.
När du har skapat den nya appen, navigera till appens katalog och kör följande npm kommando för att installera de nödvändiga paketen:
npm install axios @iconify/vue @vueuse/core
De npm kommandot installerar tre paket: axios (för HTTP-förfrågningar), @iconify/vue (för enkel ikonintegrering i Vue), och @vueuse/core (erbjuder viktiga Vue-verktyg).
Du kommer att använda axios och @iconify/vue för att hämta data och lägga till ikoner i din applikation. @vueuse/core innehåller Vue-verktyg, inklusive använd InfiniteScroll komponent för att uppnå oändlig rullning.
Hämtar dummydata från JSONPlaceholder API
För att implementera den oändliga rullningsfunktionen behöver du data. Du kan antingen hårdkoda dessa data eller hämta data från en gratis falsk API-källa som JSONPlatshållare.
Att få dessa data från JSONPlaceholder imiterar verkliga scenarier, eftersom de flesta webbapplikationer får data från databaser istället för hårdkodad data.
För att hämta data från API: et för din Vue-applikation, skapa en ny mapp i din src katalog och namnge den api. Skapa en ny JavaScript-fil i den mappen och klistra in följande kod:
//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;
Kodavsnittet består av en asynkron funktion för att få kommentarer från API-slutpunkten " https://jsonplaceholder.typicode.com/comments". Den exporterar sedan funktionen.
För att förklara ytterligare börjar kodavsnittet med att importera axios bibliotek. Koden definierar sedan få kommentarer funktion med två argument: max och utelämna.
De få kommentarer funktion inrymmer den axios.get() metod som gör en GET-förfrågan till URL: en. URL: en innehåller frågeparametrar max och utelämna, som interpoleras i strängen med hjälp av mallliterals (``). Detta gör att du kan skicka dynamiska värden till URL: en.
Funktionen returnerar sedan en ny array som består av kropp av kommentarerna som mottagits från API-slutpunkten med hjälp av Karta fungera.
Om något fel uppstår loggar kodavsnittet det till konsolen. Kodavsnittet exporterar sedan denna funktion till andra delar av din applikation.
Nu när du har hanterat logiken för att hämta dummy-data kan du skapa en ny komponent för att visa dummy-data och hantera den oändliga rullningsfunktionen.
Skapa en ny fil InfiniteScroll.vue i src/komponenter katalog och lägg till följande kod:
