Home-theater-designers
A lapozás lehetővé teszi a nagy adatkészletek felosztását kisebb, jobban kezelhető darabokra. A lapozás megkönnyíti a felhasználók számára a nagy adathalmazokban való navigálást és a keresett információk megtalálását.
A nap MUO videója GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
Ezzel a mintaprojekttel ismerkedjen meg a technikával és a Vue-ban való megvalósításával.
A Vue-Awesome-Paginate használatának megkezdése
Vue-wesome-paginate egy hatékony és könnyű Vue lapozási könyvtár, amely leegyszerűsíti a lapszámozott adatmegjelenítések létrehozásának folyamatát. Átfogó szolgáltatásokat kínál, beleértve a testreszabható összetevőket, könnyen használható API-kat és a különböző lapozási forgatókönyvek támogatását.
A vue-awesome-paginate használatának megkezdéséhez telepítse a csomagot a következő terminálparancs futtatásával a projektkönyvtárban:
npm install vue-awesome-paginate
Ezután a csomag Vue alkalmazásában való működéséhez másolja az alábbi kódot a src/main.js fájl:
import { createApp } from "vue";
import App from "./App.vue";
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");
Ez a kód importálja és regisztrálja a csomagot a .használat() módszerrel, így bárhol használhatja az alkalmazásban. A lapozási csomaghoz tartozik egy CSS fájl, amelyet a kódblokk is importál.
A Test Vue alkalmazás elkészítése
A vue-awesome-paginate csomag működésének szemléltetésére készítsen egy Vue alkalmazást, amely egy mintaadatkészletet jelenít meg. Te leszel adatok lekérése egy API-ból az Axios segítségével ehhez az alkalmazáshoz.
Másolja be az alábbi kódblokkot a sajátjába app.vue fájl:
nézzen online filmeket ingyen streaming nélkül, regisztráció nélkül
<script setup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);
const loadComments = async () => {
try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/comments`,
);
return response.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
};
onBeforeMount(async () => {
const loadedComments = await loadComments();
comments.value.push(...loadedComments);
console.log(comments.value);
});
</script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-for="comment in comments" class="comment">
<p>{{ comment }}</p>
</div>
</div>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
Ez a kódblokk használja a Vue Composition API alkatrészt építeni. Az összetevő az Axios segítségével kéri le a megjegyzéseket a JSONPlaceholder API-ból, mielőtt a Vue felcsatolná ( onBeforeMount horog). Ezután a megjegyzéseket a Hozzászólások tömböt használva a sablont a megjelenítésükhöz vagy egy betöltési üzenetet, amíg a megjegyzések nem állnak rendelkezésre.
A Vue-Awesome-Paginate integrálása a Vue alkalmazásba
Most már van egy egyszerű Vue-alkalmazása, amely lekéri az adatokat egy API-ból, és módosíthatja, hogy integrálja a vue-awesome-paginate csomagot. Ezzel az oldalszámozási funkcióval a megjegyzéseket különböző oldalakra oszthatja fel.
Helyettesíteni a forgatókönyv részed app.vue fájl ezzel a kóddal:
<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);
const onClickHandler = (page) => {
console.log(page);
};
const loadComments = async () => {
try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/comments`
);
return response.data.map(comment => comment.body);
} catch (error) {
console.error(error);
}
};
onBeforeMount(async () => {
const loadedComments = await loadComments();
comments.value.push(...loadedComments);
console.log(comments.value);
});
const displayedComments = computed(() => {
const startIndex = (currentPage.value * perPage.value) - perPage.value;
const endIndex = startIndex + perPage.value;
return comments.value.slice(startIndex, endIndex);
});
</script>
Ez a kódblokk további két reaktív hivatkozást ad hozzá: oldalanként és aktuális oldal . Ezek a hivatkozások az oldalanként megjelenítendő elemek számát, illetve az aktuális oldalszámot tárolják.
A kód egy kiszámított ref-t is létrehoz, melynek neve megjelenített Megjegyzések . Ez alapján számítja ki a megjegyzések körét aktuális oldal és oldalanként értékeket. Egy szeletet ad vissza a Hozzászólások tömb ezen a tartományon belül, amely a megjegyzéseket különböző oldalakra csoportosítja.
Most cserélje ki a sablon az App.vue fájl szakaszában a következőkkel:
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-for="comment in displayedComments" class="comment">
<p>{{ comment }}</p>
</div>
<vue-awesome-paginate
:total-items="comments.length"
:items-per-page="perPage"
:max-pages-shown="5"
v-model="currentPage"
:onclick="onClickHandler"
/>
</div>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
A v-for attribútum a renderelő listákhoz ebben a sablon részben rámutat a megjelenített Megjegyzések sor. A sablon hozzáadja a vue-wesome-paginate komponens, amelynek a fenti részlet átadja a kellékeket. Ezekről és a további kellékekről többet megtudhat a csomag hivatalos oldalán dokumentációt a GitHubon .
lehet gif háttérkép
Az alkalmazás stílusának kialakítása után egy oldalt kell kapnia, amely így néz ki:
Kattintson az egyes számozott gombokra, és különböző megjegyzéseket fog látni.
Használja az oldalszámozást vagy a végtelen görgetést a jobb adatböngészés érdekében
Most már van egy nagyon egyszerű Vue alkalmazás, amely bemutatja, hogyan lehet hatékonyan lapozni az adatokat. Végtelen görgetést is használhat hosszú adatkészletek kezelésére az alkalmazásban. A választás előtt mindenképpen fontolja meg az alkalmazás igényeit, mivel az oldalszámozásnak és a végtelen görgetésnek vannak előnyei és hátrányai.