Kaip įdiegti begalinį slinkimą „Vue“.

Begalinis slinkimas yra metodas, kurį galite naudoti norėdami parodyti daugiau turinio, kai programos naudotojas slenka puslapiu žemyn. Tai pašalina puslapių rūšiavimo poreikį ir leidžia programų naudotojams toliau naršyti didelius duomenų rinkinius.

„Vue“ programos nustatymas

Norėdami sekti šią pamoką, turite išmanyti „Vue 3“ ir „JavaScript“. Turėtumėte žinoti, kaip elgtis HTTP užklausos naudojant „Axios“..

Norėdami pradėti mokytis, kaip įgyvendinti begalinį slinkimą, sukurkite naują „Vue“ programą vykdydami toliau nurodytus veiksmus npm komanda pasirinktame kataloge:

npm create vue

Projekto sąrankos metu „Vue“ paragins jus pasirinkti programos išankstinį nustatymą. Pasirinkite Nr visoms funkcijoms, nes jums nereikės jokių programos papildymų.

Sukūrę naują programą, eikite į programos katalogą ir vykdykite toliau nurodytus veiksmus npm komandą, kad įdiegtumėte reikiamus paketus:

npm install axios @iconify/vue @vueuse/core

The npm komanda įdiegia tris paketus: aksios (HTTP užklausoms), @iconify/vue (kad būtų lengva integruoti piktogramas į „Vue“), ir @vueuse/core (siūlo esmines Vue paslaugas).

Jūs naudosite aksios ir @iconify/vue norėdami gauti duomenis ir pridėti piktogramų prie programos. @vueuse/core yra „Vue“ paslaugų, įskaitant „ useInfiniteScroll komponentas begaliniam slinkimui pasiekti.

Dummy duomenų gavimas iš JSONPlaceholder API

Norint įgyvendinti begalinio slinkimo funkciją, reikia duomenų. Šiuos duomenis galite koduoti arba gauti duomenis iš nemokamo netikro API šaltinio, pvz., JSONPlaceholder.

Šių duomenų gavimas iš JSONPlaceholder imituoja realaus gyvenimo scenarijus, nes dauguma žiniatinklio programų gauna duomenis iš duomenų bazių, o ne užkoduotų duomenų.

Norėdami gauti duomenis iš API savo „Vue“ programai, sukurkite naują aplanką src katalogą ir pavadinkite jį api. Tame aplanke sukurkite naują „JavaScript“ failą ir įklijuokite šį 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;

Kodo fragmentą sudaro asinchroninė funkcija, skirta gauti komentarus iš API galutinio taško " https://jsonplaceholder.typicode.com/comments". Tada ji eksportuoja funkciją.

Norėdami paaiškinti daugiau, kodo fragmentas pradedamas importuojant aksios biblioteka. Tada kodas apibrėžia gauti komentarus funkcija su dviem argumentais: maks ir praleisti.

The gauti komentarus Funkcijoje yra axios.get() metodas, kuris pateikia GET užklausą URL. URL yra užklausos parametrai maks ir praleisti, kurie yra interpoliuojami eilutėje naudojant šabloninius literalus (``). Tai leidžia perduoti dinamines reikšmes į URL.

Tada funkcija grąžina naują masyvą, kurį sudaro kūnas komentarų, gautų iš API galutinio taško naudojant žemėlapį funkcija.

Jei įvyksta klaida, kodo fragmentas įrašo jį į konsolę. Tada kodo fragmentas eksportuoja šią funkciją į kitas programos dalis.

Dabar, kai tvarkote fiktyvių duomenų gavimo logiką, galite sukurti naują komponentą, kad būtų rodomi fiktyvūs duomenys ir valdoma begalinio slinkimo funkcija.

Sukurkite naują failą InfiniteScroll.vue viduje src/components katalogą ir pridėkite šį kodą: