Jak implementovat nekonečné rolování ve Vue

Nekonečné posouvání je technika, kterou můžete použít k zobrazení dalšího obsahu, když uživatel vaší aplikace posouvá stránku dolů. Eliminuje potřebu stránkování a umožňuje uživatelům aplikací pokračovat v procházení rozsáhlými datovými sadami.

Nastavení vaší aplikace Vue

Abyste mohli pokračovat v tomto tutoriálu, potřebujete základní znalosti Vue 3 a JavaScriptu. Měli byste vědět, jak zacházet HTTP požadavky s Axios.

Chcete-li se začít učit, jak na to implementovat nekonečné rolování, vytvořte novou aplikaci Vue spuštěním následujícího npm příkaz ve vašem preferovaném adresáři:

npm create vue

Během nastavování projektu vás Vue vyzve k výběru přednastavení pro vaši aplikaci. Vybrat Ne pro všechny funkce, protože do aplikace nebudete potřebovat žádné doplňky.

Po vytvoření nové aplikace přejděte do adresáře aplikace a spusťte následující npm příkaz k instalaci potřebných balíčků:

npm install axios @iconify/vue @vueuse/core

The npm příkaz nainstaluje tři balíčky: axios (pro požadavky HTTP), @iconify/vue (pro snadnou integraci ikon ve Vue), a @vueuse/core (nabízí základní nástroje Vue).

budete používat axios a @iconify/vue k načtení dat a přidání ikon do vaší aplikace. @vueuse/core obsahuje nástroje Vue, včetně použijte InfiniteScroll komponenta pro dosažení nekonečného rolování.

Načítání fiktivních dat z JSONPlaceholder API

K implementaci funkce nekonečného rolování potřebujete data. Tato data můžete buď pevně zakódovat, nebo získat data z bezplatného falešného zdroje API, jako je JSONPlaceholder.

Získávání těchto dat z JSONPlaceholder napodobuje scénáře ze skutečného života, protože většina webových aplikací získává data z databází namísto pevně zakódovaných dat.

Chcete-li načíst data z API pro vaši aplikaci Vue, vytvořte novou složku ve vašem src adresář a pojmenujte jej api. V této složce vytvořte nový soubor JavaScript a vložte následující kód:

//getComments.js
import 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;

Fragment kódu se skládá z asynchronní funkce pro získávání komentářů z koncového bodu API " https://jsonplaceholder.typicode.com/comments". Poté exportuje funkci.

Abychom dále vysvětlili, fragment kódu začíná importem souboru axios knihovna. Kód pak definuje getComments funkce se dvěma argumenty: max a vynechat.

The getComments funkce domy axios.get() metoda, která vytvoří požadavek GET na adresu URL. Adresa URL obsahuje parametry dotazu max a vynechat, které jsou interpolovány v řetězci pomocí šablonových literálů (``). To vám umožňuje předávat dynamické hodnoty do adresy URL.

Funkce pak vrátí nové pole skládající se z tělo z připomínek přijatých z koncového bodu API pomocí mapa funkce.

Pokud dojde k nějaké chybě, fragment kódu ji zaznamená do konzole. Fragment kódu pak exportuje tuto funkci do jiných částí vaší aplikace.

Nyní, když jste zvládli logiku pro načítání fiktivních dat, můžete vytvořit novou komponentu pro zobrazení fiktivních dat a zpracovat funkci nekonečného posouvání.

Vytvořte nový soubor InfiniteScroll.vue v src/komponenty adresář a přidejte následující kód: