英文 | https://javascript.plainenglish.io/how-to-write-an-infinite-scroll-list-with-react-6565c775aef6

翻譯 | 楊小愛

當(dāng)您不知道頁面大小時，無限滾動是合適的。您的項目在流中（例如，時間線）。唯一的機會是按順序顯示項目。然后實現(xiàn)無限滾動可用性的最佳方式。我寫了一個簡單的模擬，當(dāng)用戶訪問滾動的最后一個東西時加載新項目。示例小程序鏈接：https://onurdayibasi.dev/infinite-scroll/v1

首先，我們需要一個具有固定高度和溢出 y 滾動能力的列表容器。

第二部分是信息卡項目和一個加載元素。加載元素僅在獲取操作活動時可見。

滾動機制

當(dāng)組件掛載到應(yīng)用程序時，我們將滾動偵聽器添加到“infinite-scroll-container”并在元素卸載時將其刪除。

這里最重要的部分是“軌道滾動”我們將在軌道滾動中做什么？

• 檢查您是否訪問了滾動區(qū)域的底部。

• 如果訪問，則從后端獲取新的數(shù)據(jù)塊

• 并生成新項目并將它們渲染到列表容器中

檢查滾動訪問最后一個元素

我們在 document.getElementById 的幫助下獲取 DOM 元素。之后，我們計算滾動訪問底部。如果滾動到底部并獲取 false，那么我們開始獲取操作。

if (el.offsetHeight + el.scrollTop >= el.scrollHeight)

然后，我寫了一個簡單的偽獲取函數(shù)，它在等待 0.6 秒后生成新項目

總結(jié)

本文分享的這個列表希望對你有所幫助，最后，感謝你的閱讀。

如果您覺得這個對您有所幫助，也請您分享給您身邊做開發(fā)的朋友，謝謝。

學(xué)習(xí)更多技能

請點擊下方公眾號