Kako implementirati beskonačno pomicanje u Vue

Beskonačno pomicanje je tehnika koju možete koristiti za prikaz više sadržaja dok se korisnik vaše aplikacije pomiče prema dolje po stranici. Uklanja potrebu za označavanjem stranica i omogućuje korisnicima aplikacije da nastave listati kroz velike skupove podataka.

Postavljanje vaše Vue aplikacije

Da biste pratili ovaj vodič, potrebno vam je osnovno razumijevanje Vue 3 i JavaScripta. Trebao bi znati kako postupati HTTP zahtjevi s Axiosom.

Za početak učiti kako implementirati beskonačno pomicanje, izradite novu Vue aplikaciju pokretanjem sljedećeg npm naredba u željenom direktoriju:

npm create vue

Tijekom postavljanja projekta, Vue će od vas tražiti da odaberete unaprijed postavljenu postavku za svoju aplikaciju. Odaberite Ne za sve značajke, jer nećete trebati nikakve dodatke svojoj aplikaciji.

Nakon što ste izradili novu aplikaciju, dođite do direktorija aplikacije i pokrenite sljedeće npm naredba za instaliranje potrebnih paketa:

npm install axios @iconify/vue @vueuse/core

The npm naredba instalira tri paketa: axios (za HTTP zahtjeve), @iconify/vue (za jednostavnu integraciju ikona u Vue), i @vueuse/core (nudi osnovne Vue uslužne programe).

Vi ćete koristiti axios i @iconify/vue za dohvaćanje podataka i dodavanje ikona vašoj aplikaciji. @vueuse/core sadrži Vue uslužne programe, uključujući useInfiniteScroll komponenta za postizanje beskonačnog skrolanja.

Dohvaćanje lažnih podataka iz API-ja JSONPlaceholder

Za implementaciju funkcije beskonačnog pomicanja potrebni su vam podaci. Ove podatke možete ili čvrsto kodirati ili dobiti podatke iz besplatnog lažnog API izvora kao što je JSON rezervirano mjesto.

Dobivanje ovih podataka iz JSONPlaceholdera oponaša scenarije iz stvarnog života, jer većina web aplikacija dobiva podatke iz baza podataka umjesto tvrdo kodiranih podataka.

Da biste dohvatili podatke iz API-ja za svoju Vue aplikaciju, stvorite novu mapu u svom src imenik i nazovite ga api. U toj mapi izradite novu JavaScript datoteku i zalijepite sljedeći kod:

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

Isječak koda sastoji se od asinkrone funkcije za dobivanje komentara od API krajnje točke " https://jsonplaceholder.typicode.com/comments". Zatim izvozi funkciju.

Da bismo dodatno objasnili, isječak koda počinje s uvozom axios knjižnica. Kod zatim definira getComments funkcija s dva argumenta: max i izostaviti.

The getComments funkcija kuće axios.get() metoda koja postavlja GET zahtjev na URL. URL sadrži parametre upita max i izostaviti, koji su interpolirani unutar niza pomoću literala predloška (``). To vam omogućuje prosljeđivanje dinamičkih vrijednosti u URL.

Funkcija zatim vraća novi niz koji se sastoji od tijelo komentara primljenih od API krajnje točke pomoću karta funkcija.

Ako se pojavi bilo kakva pogreška, isječak koda to bilježi u konzolu. Isječak koda zatim izvozi ovu funkciju u druge dijelove vaše aplikacije.

Sada kada ste obradili logiku za dohvaćanje lažnih podataka, možete stvoriti novu komponentu za prikaz lažnih podataka i rukovanje funkcijom beskonačnog pomicanja.

Napravite novu datoteku InfiniteScroll.vue u src/komponente imenik i dodajte sljedeći kod: