Kuinka toteuttaa ääretön vieritys Vuessa

Ääretön vieritys on tekniikka, jonka avulla voit näyttää enemmän sisältöä, kun sovelluksesi käyttäjä vierittää sivua alaspäin. Se poistaa sivutustarpeen ja antaa sovelluksen käyttäjille mahdollisuuden jatkaa suurten tietojoukkojen selaamista.

Vue-sovelluksen määrittäminen

Jotta voit seurata tätä opetusohjelmaa, tarvitset Vue 3:n ja JavaScriptin perustiedot. Sinun pitäisi osata käsitellä HTTP-pyynnöt Axiosilla.

Aloittaaksesi oppia kuinka toteuttaa ääretön vieritys, luo uusi Vue-sovellus suorittamalla seuraava npm komento haluamassasi hakemistossa:

npm create vue

Projektin asennuksen aikana Vue kehottaa sinua valitsemaan esiasetuksen sovelluksellesi. Valita Ei kaikille ominaisuuksille, koska et tarvitse lisäyksiä sovellukseesi.

Kun olet luonut uuden sovelluksen, siirry sovelluksen hakemistoon ja suorita seuraava npm komento asentaaksesi tarvittavat paketit:

npm install axios @iconify/vue @vueuse/core

The npm komento asentaa kolme pakettia: aksiot (HTTP-pyynnöille), @iconify/vue (Helppo kuvakkeiden integroimiseksi Vueen), ja @vueuse/core (tarjoaa välttämättömät Vue-apuohjelmat).

Tulet käyttämään aksiot ja @iconify/vue noutaaksesi tietoja ja lisätäksesi kuvakkeita sovellukseesi. @vueuse/core sisältää Vue-apuohjelmat, mukaan lukien käytä InfiniteScrollia komponentti äärettömän vierityksen saavuttamiseksi.

Haetaan tyhjää dataa JSONPlaceholder API: sta

Jotta voit toteuttaa äärettömän vieritystoiminnon, tarvitset tietoja. Voit joko koodata nämä tiedot tai saada tiedot ilmaisesta väärennetystä API-lähteestä, kuten JSONPlaceholder.

Näiden tietojen saaminen JSONPlaceholderista jäljittelee tosielämän skenaarioita, koska useimmat verkkosovellukset saavat tietoja tietokannoista kovakoodattujen tietojen sijaan.

Voit hakea tietoja Vue-sovelluksesi API: sta luomalla uuden kansion src hakemistoon ja nimeä se api. Luo kyseiseen kansioon uusi JavaScript-tiedosto ja liitä seuraava koodi:

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

Koodinpätkä koostuu asynkronisesta funktiosta, joka saa kommentteja API-päätepisteestä " https://jsonplaceholder.typicode.com/comments". Sitten se vie funktion.

Selvittääksemme lisää, koodinpätkä alkaa tuomalla aksiot kirjasto. Koodi määrittelee sitten saada kommentteja funktio kahdella argumentilla: max ja jättää pois.

The saada kommentteja funktio taloa axios.get() menetelmä, joka tekee GET-pyynnön URL-osoitteeseen. URL-osoite sisältää kyselyparametreja max ja jättää pois, jotka interpoloidaan merkkijonon sisällä käyttäen malliliteraaaleja (``). Tämän avulla voit välittää dynaamisia arvoja URL-osoitteeseen.

Funktio palauttaa sitten uuden taulukon, joka koostuu kehon kommenteista, jotka on vastaanotettu API-päätepisteestä käyttämällä kartta toiminto.

Jos virhe ilmenee, koodinpätkä kirjaa sen konsoliin. Koodinpätkä vie tämän toiminnon sovelluksesi muihin osiin.

Nyt kun olet käsitellyt valetietojen noudon logiikan, voit luoda uuden komponentin näyttämään valetiedot ja käsittelemään loputonta vieritystoimintoa.

Luo uusi tiedosto InfiniteScroll.vue in src/komponentit hakemistoon ja lisää seuraava koodi: