Home-theater-designers
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.
MUO Video dana POMICI SE ZA NASTAVAK SA SADRŽAJEM
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 @pogled/jezgra (nudi osnovne Vue uslužne programe).
tražilica tekstova pjesama i akorda
Vi ćete koristiti axios i @iconify/vue za dohvaćanje podataka i dodavanje ikona vašoj aplikaciji. @pogled/jezgra 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";
async function getComments(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);
}
}
export default 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.
Stvaranje komponente beskonačnog pomicanja
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.
program se neće zatvoriti čak ni s upraviteljem zadataka
Napravite novu datoteku InfiniteScroll.vue u src/komponente imenik i dodajte sljedeći kod:
<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
const newComments = await getComments(
commentsDisplayed,
commentsList.value.length
);
commentsList.value.push(...newComments);
};
useInfiniteScroll(
listEl,
async () => {
await commentsToDisplayOnScroll();
},
{ distance: 10 }
);
</script>
Gornji isječak koda opisuje blok skripte za InfiniteScroll komponenta.
Isječak koda uvozi ref i useInfiniteScroll funkcije iz pogled i @pogled/jezgra , odnosno. Isječak također uvozi getComments funkcija iz getComments.js datoteka.
Zatim, isječak stvara a listaEl referenca s ref funkcija. listaEl upućuje na DOM element s funkcionalnošću beskonačnog pomicanja.
The komentari prikazani varijabla predstavlja broj komentara za početni prikaz na stranici. Popis komentara sadrži niz komentara koje isječak koda dohvaća s getComments funkcija.
Isječak definira a commentsToDisplayOnScroll asinkrona funkcija koja dohvaća nove komentare s getComments funkciju i pridodaje ih postojećem Popis komentara niz s operatorom širenja ( ... ).
Na kraju, isječak koda poziva useInfiniteScroll funkcija za omogućavanje ponašanja beskonačnog pomicanja uzimajući tri argumenta:
- DOM element ( listaEl ) referenca predstavlja popis kroz koji će se korisnik aplikacije kretati.
- Asinkroni poziv funkcije kada se korisnik pomiče kako bi pokrenuo dohvaćanje novih komentara i njihovo dodavanje u Popis komentara .
- Neobavezni konfiguracijski objekt sa svojstvima. Predmet { udaljenost: 10 } navodi da se novi komentari trebaju početi učitavati kada je korisnik udaljen 10 piksela od dna popisa.
Korištenje komponente beskonačnog pomicanja
Nakon rukovanja logikom beskonačnog pomicanja u bloku skripte InfiniteScroll komponentu, trebate prikazati sadržaj u bloku predloška.
Zalijepite sljedeći blok koda u svoj InfiniteScroll komponenta:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Ovaj blok koda definira predložak za Vue komponentu odgovornu za iscrtavanje popisa komentara.
The element sadrži zbirku
Svaki komentar iz niza prikazuje se unutar kako biste omogućili funkciju beskonačnog pomicanja.
Zatim možete koristiti InfiniteScroll komponenta u vašem app.vue datoteka.
<!-- App.vue -->
<script setup>
import InfiniteScroll from "./components/InfiniteScroll.vue";
import { Icon } from "@iconify/vue";
</script>
<template>
<Suspense>
<InfiniteScroll />
<template #fallback>
<Icon icon="eos-icons:bubble-loading" width="250" height="250" />
</template>
</Suspense>
</template>
Gornji blok koda uvozi InfiniteScroll Komponenta i Ikona komponenta. Zatim obavija InfiniteScroll komponenta u a Suspenzija komponenta.
The Suspenzija komponenta vam omogućuje renderiranje zamjenskog sadržaja (ikone) jer Vue rješava sve asinkrone funkcije u InfiniteScroll komponenta.
kako pokrenuti BIOS Windows 8.1
Sada možete pregledati svoju aplikaciju pokretanjem naredbe npm pokrenuti dev u imeniku aplikacije. Trebali biste vidjeti sučelje slično slici ispod:
Gornji pregled prikazuje deset komentara dok postavljate commentsToBeDisplayed varijable na 10. Dok se pomičete prema dolje, aplikacija učitava više komentara za čitanje.
Tehnika beskonačnog pomicanja popularna je među web aplikacijama, osobito u aplikacijama društvenih medija kao što su X i Tiktok.
Ova tehnika osigurava da korisnici aplikacije ostanu angažirani jer neprestano dohvaća više podataka, pružajući im sve veći tok sadržaja za čitanje, učenje i gledanje, čime se održava njihov interes.
Naučite ponovno koristiti Vue komponente s utorima
Naučili ste kako implementirati tehniku beskonačnog pomicanja pomoću useInfiniteScroll komponente dostupne VueUse.
Na suvremenim web stranicama uobičajeno je renderirati iste komponente s različitim HTML sadržajem. Možete naučiti ponovno koristiti Vue komponente kako biste postigli ovaj dosljedan osjećaj u različitim dijelovima web-aplikacije.