A végtelen görgetés akkor hasznos, ha nagy adatkészleteket kell megjelenítenie az alkalmazásban. Tanulja meg, hogyan kell megvalósítani a Vue-ban.
A végtelen görgetés egy olyan technika, amellyel több tartalom jeleníthető meg, miközben az alkalmazás felhasználója lefelé görget az oldalon. Kiküszöböli a lapozás szükségességét, és lehetővé teszi az alkalmazás felhasználóinak, hogy folytassák a nagy adatkészletek görgetését.
A Vue alkalmazás beállítása
Az oktatóanyag követéséhez alapszintű ismeretekre van szüksége a Vue 3-ról és a JavaScriptről. Tudnod kell kezelni HTTP kérések az Axios segítségével.
Hogy elkezdje megtanulni, hogyan kell végtelen görgetést valósítson meg, hozzon létre egy új Vue alkalmazást a következő futtatásával npm parancsot a kívánt könyvtárban:
npm create vue
A projekt beállítása során a Vue felkéri, hogy válasszon egy előre beállított beállítást az alkalmazáshoz. Választ Nem az összes funkcióhoz, mivel nincs szükség kiegészítésre az alkalmazásban.
Miután létrehozta az új alkalmazást, keresse meg az alkalmazás könyvtárát, és futtassa a következőt
npm parancs a szükséges csomagok telepítéséhez:npm install axios @iconify/vue @vueuse/core
A npm parancs három csomagot telepít: axiók (HTTP kérések esetén), @iconify/vue (az ikonok egyszerű integrálásához a Vue-ban), és @vueuse/core (a Vue alapvető segédprogramjait kínálja).
Használni fogod axiók és @iconify/vue adatok lekéréséhez és ikonok hozzáadásához az alkalmazáshoz. @vueuse/core Vue segédprogramokat tartalmaz, beleértve a useInfiniteScroll komponens a végtelen görgetés elérésére.
Dummy adatok lekérése a JSONPlaceholder API-ból
A végtelen görgetés funkció megvalósításához adatokra van szükség. Ezeket az adatokat keményen kódolhatja, vagy ingyenes hamis API-forrásból szerezheti be az adatokat, például JSONPlaceholder.
Ezeknek az adatoknak a JSONPlaceholder-ből való lekérése a valós forgatókönyveket utánozza, mivel a legtöbb webalkalmazás adatbázisból kap adatokat a kemény kódolású adatok helyett.
Ha adatokat szeretne lekérni az API-ból a Vue-alkalmazáshoz, hozzon létre egy új mappát src könyvtárat, és nevezd el api. Ebben a mappában hozzon létre egy új JavaScript fájlt, és illessze be a következő kódot:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(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);
}
}
exportdefault getComments;
A kódrészlet egy aszinkron függvényből áll, amely megjegyzéseket kér az API-végponttól " https://jsonplaceholder.typicode.com/comments". Ezután exportálja a függvényt.
A további magyarázat érdekében a kódrészlet a következő importálásával kezdődik axiók könyvtár. A kód ezután meghatározza a getComments függvény két argumentummal: max és kihagyni.
A getComments funkciónak ad otthont a axios.get() módszer, amely GET kérést küld az URL-hez. Az URL lekérdezési paramétereket tartalmaz max és kihagyni, amelyeket a karakterláncon belül interpolálunk sablon literálok segítségével (``). Ez lehetővé teszi dinamikus értékek átadását az URL-nek.
A függvény ezután egy új tömböt ad vissza, amely a test az API-végponttól kapott megjegyzések közül a térkép funkció.
Ha bármilyen hiba történik, a kódrészlet naplózza azt a konzolon. A kódrészlet ezután exportálja ezt a függvényt az alkalmazás más részeibe.
Most, hogy kezelte az áladatok lekérésének logikáját, létrehozhat egy új komponenst az áladatok megjelenítéséhez és a végtelen görgetési funkció kezeléséhez.
Hozzon létre egy új fájlt InfiniteScroll.vue ban,-ben src/components könyvtárba, és adja hozzá a következő kódot:
