Home-theater-designers
Oändlig rullning är en teknik som du kan använda för att visa mer innehåll när din appanvändare rullar ner på sidan. Det eliminerar behovet av paginering och tillåter appanvändare att fortsätta bläddra igenom stora datamängder.
MUO Dagens video SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL
Konfigurera din Vue-applikation
För att följa med i denna handledning behöver du en grundläggande förståelse för Vue 3 och JavaScript. Du borde veta hur du ska hantera HTTP-förfrågningar med Axios .
Att börja lära sig hur man implementera oändlig rullning , skapa en ny Vue-app genom att köra följande npm kommandot i din föredragna katalog:
npm create vue
Under projektinställningen kommer Vue att uppmana dig att välja en förinställning för din app. Välja Nej för alla funktioner, eftersom du inte behöver några tillägg till din app.
När du har skapat den nya appen, navigera till appens katalog och kör följande npm kommando för att installera de nödvändiga paketen:
npm install axios @iconify/vue @vueuse/core
De npm kommandot installerar tre paket: axios (för HTTP-förfrågningar), @iconify/vue (för enkel ikonintegrering i Vue) , och @view/core (erbjuder viktiga Vue-verktyg).
Du kommer att använda axios och @iconify/vue för att hämta data och lägga till ikoner i din applikation. @view/core innehåller Vue-verktyg, inklusive använd InfiniteScroll komponent för att uppnå oändlig rullning.
Hämtar dummydata från JSONPlaceholder API
För att implementera den oändliga rullningsfunktionen behöver du data. Du kan antingen hårdkoda dessa data eller hämta data från en gratis falsk API-källa som JSONPlatshållare .
Att få dessa data från JSONPlaceholder imiterar verkliga scenarier, eftersom de flesta webbapplikationer får data från databaser istället för hårdkodad data.
För att hämta data från API:et för din Vue-applikation, skapa en ny mapp i din src katalog och namnge den api . Skapa en ny JavaScript-fil i den mappen och klistra in följande 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;
Kodavsnittet består av en asynkron funktion för att få kommentarer från API-slutpunkten 'https://jsonplaceholder.typicode.com/comments' . Den exporterar sedan funktionen.
varför levererar mitt budskap inte
För att förklara ytterligare börjar kodavsnittet med att importera axios bibliotek. Koden definierar sedan få kommentarer funktion med två argument: max och utelämna .
De få kommentarer funktion inrymmer den axios.get() metod som gör en GET-begäran till URL:en. Webbadressen innehåller frågeparametrar max och utelämna , som interpoleras i strängen med hjälp av mallliterals ( `` ). Detta gör att du kan skicka dynamiska värden till URL:en.
Funktionen returnerar sedan en ny array som består av kropp av kommentarerna som mottagits från API-slutpunkten med hjälp av Karta fungera.
Om något fel uppstår loggar kodavsnittet det till konsolen. Kodavsnittet exporterar sedan denna funktion till andra delar av din applikation.
Skapa komponenten Infinite Scroll
Nu när du har hanterat logiken för att hämta dummy-data kan du skapa en ny komponent för att visa dummy-data och hantera den oändliga rullningsfunktionen.
Skapa en ny fil InfiniteScroll.vue i src/komponenter katalog och lägg till följande 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>
Kodavsnittet ovan beskriver skriptblocket för InfiniteScroll komponent.
Kodavsnittet importerar ref och använd InfiniteScroll funktioner från se och @view/core , respektive. Utdraget importerar också få kommentarer funktion från getComments.js fil.
Sedan skapar kodavsnittet en listaEl referens med ref fungera. listaEl refererar till DOM-elementet med den oändliga rullningsfunktionen.
De kommentarer visas variabel representerar antalet kommentarer som ska visas initialt på sidan. kommentarslista innehåller den mängd kommentarer som kodavsnittet hämtar med få kommentarer fungera.
Utdraget definierar en commentsToDisplayOnScroll asynkron funktion som hämtar nya kommentarer med få kommentarer funktion och lägger till dem till den befintliga kommentarslista array med spridningsoperatorn ( ... ).
Slutligen anropar kodavsnittet använd InfiniteScroll funktion för att aktivera det oändliga rullningsbeteendet med tre argument:
- DOM-elementet ( listaEl ) referens representerar listan som appanvändaren kommer att bläddra igenom.
- Ett asynkront funktionsanrop när användaren rullar för att utlösa hämtning av nya kommentarer och lägga till dem i kommentarslista .
- Ett valfritt konfigurationsobjekt med egenskaper. Objektet { avstånd: 10 } anger att de nya kommentarerna ska börja laddas när användaren är 10 pixlar bort från botten av listan.
Använda Infinite Scroll-komponenten
Efter att ha hanterat den oändliga rullningslogiken i skriptblocket i InfiniteScroll komponent måste du rendera innehåll i mallblocket.
Klistra in följande kodblock i din InfiniteScroll komponent:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Detta kodblock definierar mallen för en Vue-komponent som ansvarar för att rendera en lista med kommentarer.
De elementet innehåller en samling av
hur man gör en video till din bakgrund
Varje kommentar från arrayen visas inom en för att aktivera den oändliga rullningsfunktionen.
Sedan kan du använda InfiniteScroll 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>
Kodblocket ovan importerar InfiniteScroll Komponent och Ikon komponent. Den lindar sedan in InfiniteScroll komponent i en Spänning komponent.
De Spänning komponent låter dig återge reservinnehåll (en ikon) eftersom Vue löser alla asynkrona funktioner i InfiniteScroll komponent.
Nu kan du förhandsgranska din applikation genom att köra kommandot npm kör dev i appens katalog. Du bör se ett liknande gränssnitt som bilden nedan:
Förhandsgranskningen ovan visar tio kommentarer när du ställer in commentsToBeDisplayed variabel till 10. När du rullar nedåt laddar appen fler kommentarer att läsa.
Den oändliga rullningstekniken är populär bland webbapplikationer, särskilt i appar för sociala medier som X och Tiktok.
Den här tekniken säkerställer att appanvändare förblir engagerade när den kontinuerligt hämtar mer data, vilket ger dem en ständigt växande ström av innehåll att läsa, lära sig och titta på, vilket håller deras intresse väckt.
Lär dig att återanvända Vue-komponenter med spelautomater
Du har lärt dig hur du implementerar tekniken för oändlig rullning med komponenten useInfiniteScroll som är tillgänglig för VueUse.
På moderna webbplatser är det vanligt att rendera samma komponenter med olika HTML-innehåll. Du kan lära dig att återanvända Vue-komponenter för att uppnå denna konsekventa känsla i olika delar av en webbapp.