無(wú)限滾動(dòng)已經(jīng)存在了一段時(shí)間了。 基本思想：當(dāng)您滾動(dòng)時(shí)，新內(nèi)容會(huì)在底部加載，從而創(chuàng)建看似無(wú)窮無(wú)盡的滾動(dòng)。 實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但如果沒(méi)有仔細(xì)規(guī)劃，性能就會(huì)受到影響。 經(jīng)過(guò)幾次內(nèi)容重新獲取后，您可能會(huì)擁有數(shù)百個(gè) DOM 元素，其中許多元素是不可見(jiàn)的。 幸運(yùn)的是，存在一些模式可以緩解這種情況，我們將使用 Angular 來(lái)探索一種模式。

這是我們想要避免的。

虛擬滾動(dòng)

虛擬滾動(dòng)在任何時(shí)候僅渲染大列表的子集——與無(wú)限滾動(dòng)不同。 它非常適合一次性渲染所有內(nèi)容效率低下的大型數(shù)據(jù)集。 僅渲染可見(jiàn)（和近乎可見(jiàn)）的項(xiàng)目；當(dāng)用戶滾動(dòng)時(shí)，項(xiàng)目會(huì)動(dòng)態(tài)交換。 這顯著減少了 DOM 元素，從而提高了性能。

虛擬滾動(dòng)通過(guò)創(chuàng)建與視口高度匹配的容器來(lái)工作。 只有可見(jiàn)項(xiàng)目（加上緩沖區(qū)）才會(huì)在此容器中以特定的滾動(dòng)深度呈現(xiàn)，并通過(guò) CSS 進(jìn)行管理。 滾動(dòng)更新容器，顯示新項(xiàng)目并刪除視圖之外的項(xiàng)目，調(diào)整滾動(dòng)深度。 將此與無(wú)限滾動(dòng)相結(jié)合，創(chuàng)建一個(gè)幾乎無(wú)限的列表，而不會(huì)造成性能損失。

下面的示例顯示了包含數(shù)千個(gè)項(xiàng)目的列表，但一次最多渲染 8 個(gè)。 滾動(dòng)會(huì)調(diào)整 CSS 滾動(dòng)高度，產(chǎn)生列表更長(zhǎng)的錯(cuò)覺(jué)。

現(xiàn)實(shí)世界的例子

讓我們構(gòu)建一個(gè) Angular 應(yīng)用程序，從 Reddit 的分頁(yè) API 獲取媒體并將其顯示在虛擬滾動(dòng)列表中。 它將包括一個(gè)用于子 Reddit 選擇的搜索欄和一個(gè)過(guò)濾器。 向下滾動(dòng)可加載更多內(nèi)容。 我們的關(guān)鍵要求：

1. 由 RxJS Observables 和異步管道驅(qū)動(dòng)。
2. 在 subreddit 或過(guò)濾器更改時(shí)重置內(nèi)容，但不會(huì)在附加新內(nèi)容時(shí)重置內(nèi)容。
3. 將以前的內(nèi)容存儲(chǔ)在內(nèi)存中，以便無(wú)縫向上/向下滾動(dòng)，無(wú)需多余的 API 調(diào)用。

我們將使用 @angular/cdk 包（包含 Virtual Scroller 組件）。使用npm i @angular/cdk安裝它。

雖然此示例使用 Angular，但類似的模式也適用于 React、Vue 或 vanilla JavaScript。 此處提供了說(shuō)明基本原理的基本演示。

服務(wù)設(shè)置

首先，我們創(chuàng)建一個(gè)服務(wù)，使用 Angular 的 HttpClient 和 RxJS Observables 從 Reddit API 獲取內(nèi)容來(lái)管理 subreddit 名稱和過(guò)濾器。 （為簡(jiǎn)潔起見(jiàn)，省略了一些代碼；完整的實(shí)現(xiàn)在這里）。

// ... (Omitted for brevity) ...

內(nèi)容獲取方法在數(shù)據(jù)請(qǐng)求期間跟蹤特定屬性。 page 屬性被添加到查詢字符串中，以確保在最后一項(xiàng)之后獲取新內(nèi)容。 我們還過(guò)濾掉 NSFW 內(nèi)容和缺少帖子提示的項(xiàng)目。這可確保僅顯示預(yù)期的內(nèi)容。

// ... (Omitted for brevity) ...

query$ observable（之前被省略）在獲取內(nèi)容之前合并不同的 observable 流。 scan 運(yùn)算符結(jié)合了先前和當(dāng)前的流結(jié)果，構(gòu)建跨多個(gè)頁(yè)面的大型數(shù)據(jù)數(shù)組。

這允許廣泛滾動(dòng)；只有 subreddit 名稱或過(guò)濾器更改才會(huì)觸發(fā)完整的重新獲取。 nextPage 是 query$ 的屬性，存儲(chǔ)當(dāng)前集合中的最后一個(gè)項(xiàng)目 ID，用于確定在接近虛擬滾動(dòng)條底部時(shí)要獲取的下一頁(yè)。

// ... (Omitted for brevity) ...

RxJS 的強(qiáng)大之處在于組合和操作數(shù)據(jù)流。這使我們能夠在業(yè)務(wù)邏輯到達(dá)組件之前對(duì)其進(jìn)行處理，從而使組件保持清潔和可重用。

組件設(shè)置

接下來(lái)，我們使用 Angular 的 CdkVirtualScrollViewport 設(shè)置組件來(lái)顯示內(nèi)容。 一個(gè)方法處理視口底部附近的滾動(dòng)，通過(guò) subRedditPage$ observable 獲取下一頁(yè)。

// ... (Omitted for brevity) ...

模板使用異步管道訂閱query$。 注意：隨著內(nèi)容高度可變，虛擬滾動(dòng)條變得更加復(fù)雜；為了提高性能，建議使用一致的物品高度。

// ... (Omitted for brevity) ...

當(dāng)用戶接近底部時(shí)，onScroll 方法會(huì)獲取更多內(nèi)容。它使用 nextPage ID（來(lái)自 query$）并發(fā)送到 subRedditPage$，觸發(fā)下一個(gè) API 調(diào)用并通過(guò) query$ 更新列表。

// ... (Omitted for brevity) ...

搜索欄和選項(xiàng)卡控件也集成在一起（下面的簡(jiǎn)化示例）。

// ... (Omitted for brevity) ...

結(jié)論

這會(huì)創(chuàng)建一個(gè)幾乎無(wú)限的滾動(dòng)條。 您可以在此處進(jìn)行測(cè)試。 Reddit 的 API 有速率限制；你可能會(huì)在測(cè)試過(guò)程中碰到它們。 有關(guān)更多詳細(xì)信息，包括其他功能，請(qǐng)參閱 GitHub 存儲(chǔ)庫(kù)此處。

以上是使用 Angular 實(shí)現(xiàn)幾乎無(wú)限滾動(dòng)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！