Neskončno drsenje je priročno, ko morate v aplikaciji prikazati velike nize podatkov. Naučite se, kako ga implementirati v Vue.
Neskončno drsenje je tehnika, ki jo lahko uporabite za prikaz več vsebine, ko se uporabnik vaše aplikacije pomika navzdol po strani. Odpravlja potrebo po paginaciji in omogoča uporabnikom aplikacije, da se še naprej pomikajo po velikih nizih podatkov.
Nastavitev vaše aplikacije Vue
Če želite slediti tej vadnici, potrebujete osnovno razumevanje Vue 3 in JavaScripta. Moral bi vedeti, kako ravnati Zahteve HTTP z Axios.
Za začetek učenja, kako izvajati neskončno drsenje, ustvarite novo aplikacijo Vue tako, da zaženete naslednje npm ukaz v želenem imeniku:
npm create vue
Med nastavitvijo projekta vas bo Vue pozval, da izberete prednastavitev za vašo aplikacijo. Izberite št za vse funkcije, saj ne boste potrebovali nobenih dodatkov k svoji aplikaciji.
Ko ustvarite novo aplikacijo, se pomaknite do imenika aplikacije in zaženite naslednje npm ukaz za namestitev potrebnih paketov:
npm install axios @iconify/vue @vueuse/core
The npm ukaz namesti tri pakete: axios (za HTTP zahteve), @iconify/vue (za enostavno integracijo ikon v Vue), in @vueuse/core (ponuja osnovne pripomočke Vue).
Uporabili boste axios in @iconify/vue za pridobivanje podatkov in dodajanje ikon vaši aplikaciji. @vueuse/core vsebuje pripomočke Vue, vključno z useInfiniteScroll komponenta za doseganje neskončnega drsenja.
Pridobivanje navideznih podatkov iz API-ja JSONPlaceholder
Za izvedbo funkcije neskončnega drsenja potrebujete podatke. Te podatke lahko trdo kodirate ali pridobite podatke iz brezplačnega lažnega vira API-ja, kot je JSONPlaceholder.
Pridobivanje teh podatkov iz JSONPlaceholder posnema scenarije iz resničnega življenja, saj večina spletnih aplikacij dobi podatke iz baz podatkov namesto trdo kodiranih podatkov.
Če želite pridobiti podatke iz API-ja za svojo aplikacijo Vue, ustvarite novo mapo v svoji src imenik in ga poimenujte api. V tej mapi ustvarite novo datoteko JavaScript in prilepite to kodo:
//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;
Delček kode je sestavljen iz asinhrone funkcije za pridobivanje komentarjev iz končne točke API-ja " https://jsonplaceholder.typicode.com/comments". Nato izvozi funkcijo.
Za nadaljnjo razlago se delček kode začne z uvozom axios knjižnica. Koda nato definira getComments funkcija z dvema argumentoma: maks in izpustiti.
The getComments funkcija hiše axios.get() metoda, ki naredi zahtevo GET za URL. URL vsebuje parametre poizvedbe maks in izpustiti, ki so interpolirani znotraj niza z uporabo literalov predloge (``). To vam omogoča posredovanje dinamičnih vrednosti v URL.
Funkcija nato vrne novo matriko, sestavljeno iz telo komentarjev, prejetih od končne točke API z uporabo zemljevid funkcijo.
Če pride do kakršne koli napake, jo delček kode zabeleži v konzolo. Delček kode nato izvozi to funkcijo v druge dele vaše aplikacije.
Zdaj, ko ste obdelali logiko za pridobivanje navideznih podatkov, lahko ustvarite novo komponento za prikaz navideznih podatkov in upravljanje funkcije neskončnega drsenja.
Ustvari novo datoteko InfiniteScroll.vue v src/komponente imenik in dodajte naslednjo kodo:
