Oneindig scrollen is handig wanneer u grote datasets in uw toepassing moet weergeven. Leer hoe u het in Vue implementeert.
Oneindig scrollen is een techniek die u kunt gebruiken om meer inhoud weer te geven terwijl uw app-gebruiker naar beneden scrolt. Het elimineert de noodzaak van paginering en stelt app-gebruikers in staat om door grote datasets te blijven scrollen.
Uw Vue-toepassing instellen
Om deze tutorial te volgen, heb je een basiskennis van Vue 3 en JavaScript nodig. Je moet weten hoe je ermee om moet gaan HTTP-verzoeken met Axios.
Om te beginnen te leren hoe oneindig scrollen implementeren, maak een nieuwe Vue-app door het volgende uit te voeren npm opdracht in uw voorkeursdirectory:
npm create vue
Tijdens de projectconfiguratie vraagt Vue u om een voorinstelling voor uw app te selecteren. Kiezen Nee voor alle functies, aangezien u geen toevoegingen aan uw app nodig heeft.
Nadat u de nieuwe app hebt gemaakt, navigeert u naar de directory van de app en voert u het volgende uit npm opdracht om de benodigde pakketten te installeren:
npm install axios @iconify/vue @vueuse/core
De npm opdracht installeert drie pakketten: axioma's (voor HTTP-verzoeken), @iconify/vue (voor eenvoudige pictogramintegratie in Vue), En @vueuse/core (met essentiële Vue-hulpprogramma's).
Je zult gebruiken axioma's En @iconify/vue om gegevens op te halen en pictogrammen aan uw toepassing toe te voegen. @vueuse/core bevat Vue-hulpprogramma's, waaronder de gebruik InfiniteScroll component voor het bereiken van oneindig scrollen.
Dummygegevens ophalen uit JSONPlaceholder API
Om de functie voor oneindig scrollen te implementeren, hebt u gegevens nodig. U kunt deze gegevens hard coderen of gegevens ophalen van een gratis nep-API-bron zoals JSON Tijdelijke aanduiding.
Door deze gegevens uit JSONPlaceholder te halen, worden realistische scenario's nagebootst, aangezien de meeste webtoepassingen gegevens uit databases halen in plaats van hardgecodeerde gegevens.
Om gegevens van de API voor uw Vue-toepassing op te halen, maakt u een nieuwe map in uw src map en geef deze een naam api. Maak in die map een nieuw JavaScript-bestand en plak de volgende code:
//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;
Het codefragment bestaat uit een asynchrone functie voor het ophalen van opmerkingen van het API-eindpunt " https://jsonplaceholder.typicode.com/comments". Vervolgens exporteert het de functie.
Om verder uit te leggen, begint het codefragment met het importeren van het axioma's bibliotheek. De code definieert vervolgens de krijg reacties functie met twee argumenten: max En weglaten.
De krijg reacties functie herbergt de axios.get() methode die een GET-verzoek doet aan de URL. De URL bevat queryparameters max En weglaten, die binnen de tekenreeks worden geïnterpoleerd met behulp van sjabloonliterals (``). Hiermee kunt u dynamische waarden doorgeven aan de URL.
De functie retourneert vervolgens een nieuwe array bestaande uit de lichaam van de opmerkingen die zijn ontvangen van het API-eindpunt met behulp van de kaart functie.
Als er een fout optreedt, logt het codefragment deze in de console. Het codefragment exporteert deze functie vervolgens naar andere delen van uw toepassing.
Nu u de logica voor het ophalen van dummy-gegevens hebt afgehandeld, kunt u een nieuwe component maken om de dummy-gegevens weer te geven en de functie voor oneindig scrollen af te handelen.
Maak een nieuw bestand aan InfiniteScroll.vue in de src/componenten directory en voeg de volgende code toe: