Home-theater-designers
Ää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.
MUO päivän video JATKA SISÄLLÖLLÄ VIERÄTÄ
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 @view/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. @view/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";
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;
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 .
kuinka löytää näytönohjain windows 10
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.
Infinite Scroll -komponentin luominen
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:
<!-- 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>
Yllä oleva koodinpätkä kuvaa ohjelman komentosarjalohkoa Loputon selaaminen komponentti.
Koodinpätkä tuo viite ja käytä InfiniteScrollia toimintoja alkaen näkymä ja @view/core , vastaavasti. Katkelma tuo myös saada kommentteja toiminto alkaen getComments.js tiedosto.
Sitten katkelma luo a listEl viittaus viite toiminto. listEl viittaa DOM-elementtiin, jossa on ääretön vieritystoiminto.
The kommentitNäytetty muuttuja edustaa sivulla alun perin näytettävien kommenttien määrää. kommenttilista sisältää joukon kommentteja, jotka koodinpätkä hakee saada kommentteja toiminto.
Windows 7 ei tunnista Android -puhelinta
Katkelma määrittelee a commentsToDisplayOnScroll asynkroninen toiminto, joka hakee uudet kommentit saada kommentteja funktio ja liittää ne olemassa oleviin kommenttilista taulukko levitysoperaattorilla ( ... ).
Lopuksi koodinpätkä kutsuu käytä InfiniteScrollia toiminto mahdollistaa loputtoman vierityskäyttäytymisen kolmella argumentilla:
- DOM-elementti ( listEl ) -viite edustaa luetteloa, jota sovelluksen käyttäjä selaa.
- Asynkroninen funktiokutsu, kun käyttäjä rullaa käynnistääkseen uusien kommenttien hakemisen ja liittämisen kommenttilista .
- Valinnainen konfigurointiobjekti, jossa on ominaisuuksia. Objekti { etäisyys: 10 } määrittää, että uusien kommenttien pitäisi alkaa latautua, kun käyttäjä on 10 pikselin päässä luettelon alareunasta.
Infinite Scroll -komponentin käyttäminen
Käsiteltyään loputonta vierityslogiikkaa komentosarjalohkossa Loputon selaaminen komponentti, sinun on renderöitävä sisältö mallilohkossa.
Liitä seuraava koodilohko omaan Loputon selaaminen komponentti:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Tämä koodilohko määrittää mallin Vue-komponentille, joka vastaa kommenttiluettelon hahmontamisesta.
The elementti sisältää kokoelman
Jokainen taulukon kommentti näkyy an ottaa käyttöön äärettömän vieritystoiminnon.
Sitten voit käyttää Loputon selaaminen komponenttisi app.vue tiedosto.
<!-- 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>
Yllä oleva koodilohko tuo Loputon selaaminen Komponentti ja Kuvake komponentti. Sitten se käärii Loputon selaaminen komponentti kohdassa a Jännitystä komponentti.
The Jännitystä komponentin avulla voit hahmontaa varasisältöä (kuvakkeen), kun Vue ratkaisee kaikki asynkroniset toiminnot Loputon selaaminen komponentti.
Windows 10 ulkoinen kiintolevy ei toimi
Nyt voit esikatsella sovellustasi suorittamalla komennon npm run dev sovelluksen hakemistossa. Sinun pitäisi nähdä samanlainen käyttöliittymä kuin alla olevassa kuvassa:
Yllä oleva esikatselu näyttää kymmenen kommenttia, kun asetat kommentitToBeDisplayed muuttuja 10:een. Kun vierität alaspäin, sovellus lataa lisää kommentteja luettavaksi.
Ääretön vieritystekniikka on suosittu verkkosovellusten keskuudessa, erityisesti sosiaalisen median sovelluksissa, kuten X ja Tiktok.
Tämä tekniikka varmistaa, että sovelluksen käyttäjät pysyvät sitoutuneina, kun se hakee jatkuvasti lisää dataa, tarjoten heille jatkuvasti laajenevaa sisältöä luettavaa, oppimista ja katseltavaa, mikä pitää heidän kiinnostuksensa yllä.
Opi käyttämään Vue-komponentteja uudelleen slottien kanssa
Olet oppinut toteuttamaan äärettömän vieritystekniikan VueUsen käytettävissä olevan useInfiniteScroll-komponentin avulla.
Nykypäivän verkkosivustoilla on yleistä hahmontaa samat komponentit eri HTML-sisällöllä. Voit oppia käyttämään Vue-komponentteja uudelleen saavuttaaksesi tämän yhtenäisen tunteen verkkosovelluksen eri osissa.