Nekonečné posúvanie sa hodí, keď potrebujete vo svojej aplikácii zobraziť veľké množiny údajov. Zistite, ako to implementovať vo Vue.
Nekonečné posúvanie je technika, ktorú môžete použiť na zobrazenie ďalšieho obsahu, keď sa používateľ vašej aplikácie posúva nadol po stránke. Eliminuje potrebu stránkovania a umožňuje používateľom aplikácie pokračovať v prezeraní veľkých súborov údajov.
Nastavenie vašej aplikácie Vue
Ak chcete pokračovať v tomto návode, potrebujete základné znalosti o Vue 3 a JavaScripte. Mali by ste vedieť, ako zaobchádzať HTTP požiadavky s Axios.
Aby ste sa začali učiť, ako na to implementovať nekonečné rolovanie, vytvorte novú aplikáciu Vue spustením nasledujúceho npm príkaz vo vašom preferovanom adresári:
npm create vue
Počas nastavovania projektu vás Vue vyzve, aby ste vybrali predvoľbu pre vašu aplikáciu. Vyberte si Nie pre všetky funkcie, pretože do aplikácie nebudete potrebovať žiadne doplnky.
Po vytvorení novej aplikácie prejdite do adresára aplikácie a spustite nasledujúce npm príkaz na inštaláciu potrebných balíkov:
npm install axios @iconify/vue @vueuse/core
The npm príkaz nainštaluje tri balíčky: axios (pre požiadavky HTTP), @iconify/vue (pre jednoduchú integráciu ikon vo Vue), a @vueuse/core (ponúka základné nástroje Vue).
Budete používať axios a @iconify/vue na načítanie údajov a pridanie ikon do vašej aplikácie. @vueuse/core obsahuje nástroje Vue vrátane použite InfiniteScroll komponent na dosiahnutie nekonečného rolovania.
Načítavanie fiktívnych údajov z JSONPlaceholder API
Na implementáciu funkcie nekonečného rolovania potrebujete dáta. Tieto údaje môžete buď napevno zakódovať, alebo získať údaje z bezplatného falošného zdroja API, napr JSONPlaceholder.
Získavanie týchto údajov z JSONPlaceholder napodobňuje scenáre zo skutočného života, pretože väčšina webových aplikácií získava údaje z databáz namiesto napevno kódovaných údajov.
Ak chcete získať údaje z API pre vašu aplikáciu Vue, vytvorte nový priečinok vo svojom src adresár a pomenujte ho api. V tomto priečinku vytvorte nový súbor JavaScript a prilepte nasledujúci kód:
//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;
Útržok kódu pozostáva z asynchrónnej funkcie na získavanie komentárov z koncového bodu API " https://jsonplaceholder.typicode.com/comments". Potom exportuje funkciu.
Aby sme to vysvetlili ďalej, útržok kódu začína importovaním súboru axios knižnica. Kód potom definuje getComments funkcia s dvoma argumentmi: max a vynechať.
The getComments funkcia domy axios.get() metóda, ktorá vytvára požiadavku GET na adresu URL. Adresa URL obsahuje parametre dopytu max a vynechať, ktoré sú interpolované v rámci reťazca pomocou šablónových literálov (``). To vám umožňuje odovzdať dynamické hodnoty do adresy URL.
Funkcia potom vráti nové pole pozostávajúce z telo komentárov prijatých z koncového bodu API pomocou mapa funkciu.
Ak sa vyskytne nejaká chyba, útržok kódu ju zaznamená do konzoly. Útržok kódu potom exportuje túto funkciu do iných častí vašej aplikácie.
Teraz, keď ste zvládli logiku načítania fiktívnych údajov, môžete vytvoriť nový komponent na zobrazenie fiktívnych údajov a zvládnuť funkciu nekonečného rolovania.
Vytvorte nový súbor InfiniteScroll.vue v src/komponenty adresár a pridajte nasledujúci kód:
