Home-theater-designers
Uendelig rulning er en teknik, du kan bruge til at vise mere indhold, når din appbruger ruller ned på siden. Det eliminerer behovet for paginering og giver app-brugere mulighed for at fortsætte med at rulle gennem store datasæt.
MUO Video af dagen RUL FOR AT FORTSÆTTE MED INDHOLD
Opsætning af din Vue-applikation
For at følge med i denne tutorial skal du have en grundlæggende forståelse af Vue 3 og JavaScript. Du skal vide, hvordan du skal håndtere HTTP-anmodninger med Axios .
For at begynde at lære at implementer uendelig rulning , opret en ny Vue-app ved at køre følgende npm kommando i din foretrukne mappe:
npm create vue
Under projektopsætningen vil Vue bede dig om at vælge en forudindstilling til din app. Vælge Ingen for alle funktioner, da du ikke behøver tilføjelser til din app.
Når du har oprettet den nye app, skal du navigere til appens bibliotek og køre følgende npm kommando for at installere de nødvendige pakker:
npm install axios @iconify/vue @vueuse/core
Det npm kommando installerer tre pakker: axios (for HTTP-anmodninger), @iconify/vue (for nem ikonintegration i Vue) , og @view/core (tilbyder væsentlige Vue-værktøjer).
Du vil bruge axios og @iconify/vue for at hente data og tilføje ikoner til din applikation. @view/core indeholder Vue-værktøjer, herunder brug InfiniteScroll komponent for at opnå uendelig rulning.
Henter Dummy-data fra JSONPlaceholder API
For at implementere den uendelige rullefunktion har du brug for data. Du kan enten hårdkode disse data eller få data fra en gratis falsk API-kilde som f.eks JSONPlaceholder .
At få disse data fra JSONPlaceholder imiterer virkelige scenarier, da de fleste webapplikationer får data fra databaser i stedet for hårdkodede data.
For at hente data fra API'et til din Vue-applikation skal du oprette en ny mappe i din src mappe og navngiv den api . I den mappe skal du oprette en ny JavaScript-fil og indsætte følgende kode:
//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;
Kodestykket består af en asynkron funktion til at få kommentarer fra API-slutpunktet 'https://jsonplaceholder.typicode.com/comments' . Den eksporterer derefter funktionen.
For at forklare yderligere, starter kodestykket med at importere axios bibliotek. Koden definerer derefter få kommentarer funktion med to argumenter: max og udelade .
Det få kommentarer funktion huser den axios.get() metode, som laver en GET-anmodning til URL'en. URL'en indeholder forespørgselsparametre max og udelade , som er interpoleret i strengen ved hjælp af skabelonliteraler ( `` ). Dette giver dig mulighed for at overføre dynamiske værdier til URL'en.
Funktionen returnerer derefter en ny matrix bestående af legeme af kommentarerne modtaget fra API-endepunktet ved hjælp af kort fungere.
hvorfor bliver mine spil ved med at gå ned
Hvis der opstår en fejl, logger kodestykket det til konsollen. Kodestykket eksporterer derefter denne funktion til andre dele af din applikation.
Oprettelse af Infinite Scroll-komponenten
Nu hvor du har håndteret logikken for at hente dummy-data, kan du oprette en ny komponent til at vise dummy-dataene og håndtere den uendelige rullefunktion.
Opret en ny fil InfiniteScroll.vue i src/komponenter bibliotek og tilføj følgende kode:
<!-- 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>
Kodestykket ovenfor beskriver scriptblokken for Uendelig rulle komponent.
Kodestykket importerer ref og brug InfiniteScroll funktioner fra udsigt og @view/core , henholdsvis. Uddraget importerer også få kommentarer funktion fra getComments.js fil.
Derefter opretter kodestykket en listeEl reference med ref fungere. listeEl refererer til DOM-elementet med den uendelige rullefunktion.
Det kommentarer vises variabel repræsenterer antallet af kommentarer, der først skal vises på siden. kommentarliste indeholder rækken af kommentarer, kodestykket henter med få kommentarer fungere.
Uddraget definerer en kommentarerTil DisplayOnScroll asynkron funktion, der henter nye kommentarer med få kommentarer funktion og tilføjer dem til den eksisterende kommentarliste array med spredningsoperatøren ( ... ).
Endelig kalder kodestykket på brug InfiniteScroll funktion til at aktivere den uendelige rulleadfærd med tre argumenter:
hvordan man sender en chat uden at de ved det
- DOM-elementet ( listeEl ) reference repræsenterer den liste, app-brugeren vil rulle igennem.
- Et asynkronfunktionskald, når brugeren ruller for at udløse hentning af nye kommentarer og tilføje dem til kommentarliste .
- Et valgfrit konfigurationsobjekt med egenskaber. Objektet { afstand: 10 } angiver, at de nye kommentarer skal begynde at indlæses, når brugeren er 10 pixels væk fra bunden af listen.
Brug af Infinite Scroll-komponenten
Efter at have håndteret den uendelige rullelogik i scriptblokken i Uendelig rulle komponent, skal du gengive indhold i skabelonblokken.
Indsæt følgende kodeblok i din Uendelig rulle komponent:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Denne kodeblok definerer skabelonen for en Vue-komponent, der er ansvarlig for at gengive en liste over kommentarer.
Det element rummer en samling af
Hver kommentar fra arrayet vises i en for at aktivere den uendelige rullefunktion.
Så kan du bruge Uendelig rulle komponent i din app.vue fil.
<!-- 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>
Kodeblokken ovenfor importerer Uendelig rulle Komponent og Ikon komponent. Det pakker derefter ind Uendelig rulle komponent i en Spænding komponent.
Det Spænding komponent giver dig mulighed for at gengive fallback-indhold (et ikon), da Vue løser alle de asynkrone funktioner i Uendelig rulle komponent.
Nu kan du forhåndsvise din applikation ved at køre kommandoen npm køre dev i appens bibliotek. Du bør se en lignende grænseflade til billedet nedenfor:
Forhåndsvisningen ovenfor viser ti kommentarer, mens du indstiller kommentarer, der skal vises variabel til 10. Når du ruller ned, indlæser appen flere kommentarer at læse.
Den uendelige rulleteknik er populær blandt webapplikationer, især i sociale medieapps som X og Tiktok.
Denne teknik sikrer, at appbrugere forbliver engagerede, da den hele tiden henter flere data, hvilket giver dem en stadigt voksende strøm af indhold at læse, lære og se, og dermed holde deres interesse vækket.
Lær at genbruge Vue-komponenter med spilleautomater
Du har lært, hvordan du implementerer uendelig scroll-teknikken med useInfiniteScroll-komponenten, der er tilgængelig for VueUse.
På moderne websteder er det almindeligt at gengive de samme komponenter med forskelligt HTML-indhold. Du kan lære at genbruge Vue-komponenter for at opnå denne ensartede følelse på tværs af forskellige dele af en webapp.