如何在Vue中實現無限滾動

無限滾動或“無頁”設計是一種先進的方法，可以在用戶逐步瀏覽網頁時無縫呈現附加信息。通過放棄傳統的分頁，該方法可以不間斷地探索大量數據集，從而提供流暢且不間斷的瀏覽體驗。

設置你的 Vue 應用程序

為了成功地完成本教程，您必須對 Vue 3 及其底層編程語言 JavaScript 有基本的理解。此外，還需要熟悉使用 Axios 處理 HTTP 請求。

要啟動在 Vue 應用程序中掌握無限滾動實現的過程，請在所需的工作區中執行以下 npm 命令:

 npm create vue

啟動項目配置過程後，Vue 將詢問如何選擇應用程序模板。建議不要選擇額外的功能，因為它們對於當前手頭的任務來說是不必要的。

建立新的應用程序後，進入其文件夾並執行以下 npm 安裝過程以獲取所需的模塊:

 npm install axios @iconify/vue @vueuse/core

執行 npm 安裝過程後，會合併三個不同的軟件包，特別是用於促進 HTTP 事務的 Axios，

該應用程序利用 Axios 和“@iconify/vue”檢索數據，同時通過所述庫合併圖像。 “@vueuse/core”包提供了一系列 Vue 實用模塊，其中包括“useInfiniteScroll”，它促進了界面內的無限滾動功能。

從 JSONPlaceholder API 獲取虛擬數據

要實現無限滾動功能，就需要數據。您可以對這些數據進行硬編碼，也可以從免費的虛假 API 源（例如 JSONPlaceholder ）獲取數據。

從 JSONPlaceholder 檢索信息模仿實際情況，就像基於 Web 的平台從數據庫獲取數據而不是依賴顯式定義的值的情況一樣。

為了從 Vue 項目中的應用程序編程接口 (API) 檢索信息，請在“src”保護傘下建立一個新目錄並將其指定為“api”。在這個新創建的目錄中，啟動一個新的 JavaScript 文檔並插入隨後的算法腳本:

 //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;

提供的代碼片段具有一個從 JSONPlaceholder API 端點“https://jsonplaceholder.typicode.com/comments ”檢索註釋的函數。此異步操作之後是函數的導出，這允許應用程序的其他部分利用其功能。

為了提供更多見解，所提供的文本涉及利用 Axios 庫從外部源獲取數據的編程示例。具體來說，它描述了名為“getComments”的函數的實現，該函數接受兩個參數，即“max”和“omit”。這些參數是函數功能的組成部分，使其能夠在其嵌入的較大程序或應用程序中執行其預期操作。

getComments 函數包含 axios.get() 方法，該方法用於將 GET 請求傳輸到指定的 URL，其中包含指定為 max 和 omit 的查詢參數。這些參數通過使用反引號 () 中的模板文字集成到 URL 中，從而便於在 URL 中插入動態變化的值。

該方法隨後利用映射操作重新構造一個包含語料庫的、通過 API 端點獲得的響應的排列。

如果檢測到錯誤，代碼片段會將問題記錄到控制台以供進一步檢查。接下來，代碼段會將此函數導出到程序的各個部分，以便在其他區域使用。

創建無限滾動組件

考慮到您在處理與數據檢索相關的邏輯操作方面的熟練程度，您現在可以繼續構建一個新穎的元素來顯示所獲取的數據並管理永久滾動功能。

為了在項目的“src/components”文件夾中創建一個名為“InfiniteScroll”的新 Vue 組件，您可以按照以下步驟操作:1.使用您喜歡的文件瀏覽器或命令行界面導航到項目的根目錄。2。找到“src”文件夾並根據需要展開它。3.在“src”目錄中搜索現有的“components”文件夾，如果不存在則創建一個。4.在新創建的或現有的“components”文件夾中，創建另一個名為“InfiniteScroll”的文件夾。5。使用文本編輯器或集成開發環境 (IDE) 打開“InfiniteScroll”文件夾，然後插入提供的代碼片段作為 content.6。單擊相應的按鈕保存對文件所做的更改

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

上述代碼片段描述了與 InfiniteScroll 組件關聯的腳本塊，詳細說明了其在 Web 開發上下文中的實現和功能。

該代碼片段從 Vue 庫以及“@vueuse/core”導入兩個函數“ref”和“useInfiniteScroll”。此外，它還從名為“getComments.js”的單獨文件導入“getComments”函數。

然後，代碼通過引用已通過“listRef”變量分配了無限滾動功能的 DOM 元素，使用“ref”函數生成無序列表。

“commentsDisplayed”變量表示首先在網頁上顯示的評論條目的預定義數量。相應地，‘commentsList’組件包含通過‘getComments’函數獲得的有序評論集合。

提供的代碼引入了評論檢索機制，利用名為commentsToDisplayOnScroll 的異步函數，該函數使用getComments 函數來獲取附加評論，並使用擴展語法(...) 將它們附加到預先存在的 commentsList 數組中。

最後，提供的代碼片段通過利用具有三個參數的 useInfiniteScroll 函數來激活無限滾動功能:

DOM 元素指定為“listEl”，用作應用程序用戶將通過滾動導航的列表的引用。

當用戶滾動時，會觸發一個異步函數來檢索新評論並將其附加到“commentsList”。

以其各種屬性為特徵的可選配置對象可用於指示一旦用戶已經相對於當前評論卷的終止點移動了十個像素的水平位移就開始顯示即將到來的評論。

使用無限滾動組件

在 InfiniteScroll 組件的腳本部分實現無限滾動功能後，需要在組件 HTML 結構的模板區域中顯示相關內容。

將以下代碼片段合併到“InfiniteScroll”組件中:

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

當前的代碼段構成了 Vue.js 組件的藍圖，該組件的任務是以用戶友好的方式可視化一系列註釋項。

元素用於包含一組 組件，每個組件都是利用 v-for 指令來生成列表的。該指令遍歷“commentsList”數組，以便在列表中創建各個項目。

註釋顯示在列表項元素中，循環的每次迭代都由相應 HTML 標記 ({{ comment }}) 內的數據插值表示。此外，無序列表元素的引用被分配給 ul 元素以實現無限滾動功能。

為了在應用程序中使用 InfiniteScroll 組件的功能，建議您將其集成到主 App.vue 文件中。這允許無縫合併並確保基於滾動的加載機制在整個用戶界面中一致應用。

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

提供的代碼導入兩個 React 組件，即“InfiniteScroll”和“Icon”，它們在“Suspense”組件中使用來管理內容的異步渲染。

Suspense 組件允許顯示佔位符（例如圖標），同時等待 InfiniteScroll 組件內異步操作的解析。這是通過使用 Vue 在渲染最終輸出之前處理所有未完成的異步任務的能力來完成的。

現在，您可以通過在項目目錄中執行命令“npm run dev”來了解您的應用程序。外觀應類似於下圖所示:

當您瀏覽下面的內容時，應用程序會根據您的進度（按收到的喜歡的降序排列）動態檢索其他評論。

無限滾動技術的使用在各種基於網絡的應用程序中得到了重視，特別是在 X 和 TikTok 等社交媒體平台中發現的應用程序。

使用這種方法可以通過不斷檢索附加信息來保持用戶參與，從而提供連續的材料流供細讀、教育和觀看，從而維持他們的好奇心和興趣。

學習通過插槽重用 Vue 組件

通過利用 VueUse 的 useInfiniteScroll 組件，您已經熟練地實現了無限滾動方法。

在當代網站開發中，通常使用不同的 HTML 內容來顯示相同​​的組件。通過掌握重用 Vue 組件的藝術，人們可以有效地在 Web 應用程序的各個部分保持統一的外觀。