Bezgalīga ritināšana ir noderīga, ja lietojumprogrammā ir jāparāda lielas datu kopas. Uzziniet, kā to ieviest Vue.
Bezgalīgā ritināšana ir paņēmiens, ko varat izmantot, lai parādītu vairāk satura, lietotnes lietotājam ritinot lapu uz leju. Tas novērš vajadzību pēc lappuses un ļauj lietotņu lietotājiem turpināt ritināt lielas datu kopas.
Jūsu Vue lietojumprogrammas iestatīšana
Lai sekotu šai apmācībai, jums ir nepieciešamas pamatzināšanas par Vue 3 un JavaScript. Jums vajadzētu zināt, kā rīkoties HTTP pieprasījumi ar Axios.
Lai sāktu mācīties, kā ieviest bezgalīgu ritināšanu, izveidojiet jaunu Vue lietotni, izpildot tālāk norādītās darbības npm komandu vēlamajā direktorijā:
npm create vue
Projekta iestatīšanas laikā Vue liks jums izvēlēties lietotnes sākotnējo iestatījumu. Izvēlieties Nē visām funkcijām, jo jums nebūs nepieciešami jūsu lietotnes papildinājumi.
Kad esat izveidojis jauno lietotni, dodieties uz lietotnes direktoriju un izpildiet tālāk norādīto npm komandu, lai instalētu nepieciešamās pakotnes:
npm install axios @iconify/vue @vueuse/core
The npm komanda instalē trīs pakotnes: axios (HTTP pieprasījumiem), @iconify/vue (ērtai ikonu integrācijai Vue), un @vueuse/core (piedāvājot būtiskas Vue utilītas).
Jūs izmantosiet axios un @iconify/vue lai ielādētu datus un pievienotu lietojumprogrammai ikonas. @vueuse/core satur Vue utilītas, tostarp useInfiniteScroll komponents bezgalīgas ritināšanas sasniegšanai.
Notiek fiktīvu datu iegūšana no JSONPlaceholder API
Lai ieviestu bezgalīgas ritināšanas funkciju, ir nepieciešami dati. Šos datus varat iekodēt vai iegūt datus no bezmaksas viltus API avota, piemēram JSONPlaceholder.
Šo datu iegūšana no JSONPlaceholder atdarina reālās dzīves scenārijus, jo lielākā daļa tīmekļa lietojumprogrammu iegūst datus no datu bāzēm, nevis kodētus datus.
Lai iegūtu datus no API savai Vue lietojumprogrammai, izveidojiet jaunu mapi savā src direktoriju un nosauciet to api. Šajā mapē izveidojiet jaunu JavaScript failu un ielīmējiet šādu kodu:
//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;
Koda fragments sastāv no asinhronas funkcijas komentāru iegūšanai no API galapunkta " https://jsonplaceholder.typicode.com/comments". Pēc tam tā eksportē funkciju.
Lai paskaidrotu sīkāk, koda fragments sākas ar importēšanu axios bibliotēka. Pēc tam kods definē saņemt komentārus funkcija ar diviem argumentiem: maks un izlaist.
The saņemt komentārus funkcijās atrodas axios.get() metode, kas veic GET pieprasījumu URL. URL satur vaicājuma parametrus maks un izlaist, kas tiek interpolēti virknē, izmantojot veidnes literāļus (``). Tas ļauj URL pārsūtīt dinamiskās vērtības.
Pēc tam funkcija atgriež jaunu masīvu, kas sastāv no ķermeni no komentāriem, kas saņemti no API galapunkta, izmantojot karte funkciju.
Ja rodas kāda kļūda, koda fragments to reģistrē konsolē. Koda fragments pēc tam eksportē šo funkciju uz citām jūsu lietojumprogrammas daļām.
Tagad, kad esat apstrādājis fiktīvo datu iegūšanas loģiku, varat izveidot jaunu komponentu, lai parādītu fiktīvos datus un apstrādātu bezgalīgās ritināšanas funkciju.
Izveidojiet jaunu failu InfiniteScroll.vue iekš src/components direktorijā un pievienojiet šādu kodu:
