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

Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

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.

MUO Video dne POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM

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 @view/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. @view/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"; 
 
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;

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.

Vytvoření komponenty Infinite Scroll

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 rolování.

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

 <!-- 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>

Výše uvedený fragment kódu popisuje blok skriptu souboru Nekonečný svitek komponent.

Fragment kódu importuje soubor ref a použijte InfiniteScroll funkce z Pohled a @view/core , resp. Fragment také importuje soubor getComments funkce z getComments.js soubor.

Poté fragment vytvoří a listEl odkaz s ref funkce. listEl odkazuje na prvek DOM s funkcí nekonečného posouvání.

The komentářeZobrazeno proměnná představuje počet komentářů, které se mají na stránce nejprve zobrazit. seznam komentářů obsahuje pole komentářů, které fragment kódu načte pomocí souboru getComments funkce.

jak opravit špatné informace o konfiguraci systému Windows 10

Úryvek definuje a commentsToDisplayOnScroll asynchronní funkce, která stahuje nové komentáře pomocí getComments funkce a připojí je k existujícím seznam komentářů pole s operátorem spread ( ... ).

Nakonec fragment kódu vyvolá použijte InfiniteScroll funkce umožňující nekonečné posouvání se třemi argumenty:

Prvek DOM ( listEl ) reference představuje seznam, kterým bude uživatel aplikace procházet.
Volání asynchronní funkce, když uživatel roluje, aby spustil načítání nových komentářů a jejich připojení k seznam komentářů .
Volitelný konfigurační objekt s vlastnostmi. Objekt { vzdálenost: 10} určuje, že nové komentáře by se měly začít načítat, když je uživatel 10 pixelů od konce seznamu.

Použití komponenty Infinite Scroll

Po zpracování logiky nekonečného rolování v bloku skriptu Nekonečný svitek musíte vykreslit obsah v bloku šablony.

Vložte následující blok kódu do svého Nekonečný svitek komponent:

 <!-- InfiniteScroll.vue --> 
<template> 
  <div> 
    <ul ref="listEl"> 
      <li v-for="comment in commentsList"> 
        {{ comment }} 
      </li> 
    </ul> 
  </div> 
</template>

Tento blok kódu definuje šablonu pro komponentu Vue odpovědnou za vykreslení seznamu komentářů.

The

seznam komentářů

Každý komentář z pole je zobrazen v rámci a prvek využívající datovou interpolaci ( {{ komentář }} ). Blok kódu přiřadí listEl odkaz na

Poté můžete použít Nekonečný svitek součást ve vašem app.vue soubor.

 <!-- 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>

Blok kódu výše importuje soubor Nekonečný svitek Komponenta a Ikona komponent. Poté se obalí Nekonečný svitek složka v a Napětí komponent.

The Napětí komponenta vám umožňuje vykreslit záložní obsah (ikonu), protože Vue řeší všechny asynchronní funkce v Nekonečný svitek komponent.

Nyní můžete spustit náhled aplikace spuštěním příkazu npm spustit dev v adresáři aplikace. Měli byste vidět podobné rozhraní jako na obrázku níže:

Výše uvedený náhled zobrazuje deset komentářů, jak nastavíte commentsToBeDisplayed proměnná na 10. Při posouvání dolů aplikace načítá další komentáře ke čtení.

Technika nekonečného posouvání je populární mezi webovými aplikacemi, zejména v aplikacích sociálních médií jako X a Tiktok.

Tato technika zajišťuje, že uživatelé aplikace zůstanou zapojeni, protože neustále načítá další data a poskytuje jim neustále se rozšiřující proud obsahu ke čtení, učení a sledování, čímž udržuje jejich zájem.

Naučte se znovu používat komponenty Vue se sloty

Naučili jste se implementovat techniku nekonečného posouvání s komponentou useInfiniteScroll dostupnou pro VueUse.

Na moderních webech je běžné vykreslovat stejné komponenty s různým obsahem HTML. Můžete se naučit znovu používat komponenty Vue, abyste dosáhli tohoto konzistentního pocitu v různých částech webové aplikace.