無限滾動分頁的靈感來自 Facebook 和 Twitter 等網站。這只是分頁，當用戶滾動到頁面底部時，會加載更多內容。這可以確保頁面上始終有更多內容供用戶閱讀，從而改善網站上的用戶體驗。
正確執行無限滾動分頁
當實現無限滾動分頁時，有一些非常重要的要點需要記住。
1.不要將重要鏈接放在底部
重要鏈接不應位于頁面底部。這是因為每次用戶嘗試向下滾動查找它們時，都會加載一組新的條目。所有重要的鏈接都應固定在側邊欄上或永久保留在頂部。
2.提前計劃
計劃好要在何處包含分頁以及如何處理它非常重要。進行分頁的常見方法是在頁面底部列出頁碼。但是，當您使用無限滾動方法時，文章列表的末尾將不再出現頁碼，因為不再需要它們。只要您不在頁腳部分包含大量信息，此分頁就可以用于所有主題，因為它可能無法達到預期的效果。
在本教程中，我們將學習如何在 JavaScript 中實現無限滾動功能。
該頁面將顯示有關貓的有趣事實列表，這些信息將來自 API。該 API 默認返回 10 個有趣的事實。當您滾動到頁面底部時，應用程序將顯示一個指示器來指示應用程序的加載狀態。同時，應用程序將調用 API 來加載下一組有趣的事實。
我們將使用此 URL 來加載有趣的事實。 API 接受查詢字符串 page，它告訴 API 要加載哪個頁面。
https://catfact.ninja/facts?page=${page}&limit=${limit}
登錄后復制
現在，讓我們開始使用該應用程序。
1. 創建項目結構
首先，創建一個具有以下結構的文件夾。
root -- index.html -- style.css -- app.js
登錄后復制
2. 構建 HTML 文件
我們的 HTML 文件中將包含幾個部分：
-
一個
container，其中將呈現整個可滾動的有趣事實列表包含每個有趣事實的
quotes 部分loader，加載有趣的事實時將可見。 loader 默認情況下是不可見的。
<div class="container">
<h1>Fun Facts about Cats</h1>
<div class="facts">
</div>
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
</div>
登錄后復制
3.構建腳本
接下來，我們需要創建一個腳本，它將連接 div 并加載有趣的事實。為此，我們將使用 querySelector()。
const factsEl = document.querySelector('.facts');
const loader = document.querySelector('.loader');
登錄后復制
我們還需要一些控制變量來定義哪一組項目將顯示在屏幕上。這段代碼中的控制變量是：
currentPage：當前頁面初始化為1，當滾動到頁面底部時，當前頁面會加1，并發出API請求獲取下一頁的內容頁。當頁面滾動到頂部時，當前頁面將減 1。
total：此變量存儲 Fun Facts API 返回的報價總數。
4. 構建 getFacts 函數
getFacts函數的作用是調用API并返回有趣的事實。 getFacts 函數接受單個參數：page。它使用上面提到的 Fetch API 來獲取無限滾動的數據。
Fetch 始終返回 promise，因此我們將使用 await-async 語法來接收和處理響應。要獲取 json 數據，我們將使用 json() 函數。 getFacts 函數返回一個承諾，它將解析并返回 JSON。
const getfacts = async (page, limit) => {
const API_URL = `https://catfact.ninja/facts?page=${page}&limit=${limit}`;
const response = await fetch(API_URL);
// handle 404
if (!response.ok) {
throw new Error(`An error occurred: ${response.status}`);
}
return await response.json();
}
登錄后復制
5. 構建 showFacts 函數
既然我們已經收到了有趣的事實，我們可以在哪里顯示這些事實呢？這就是為什么我們需要有一個 showFacts 函數。 showFacts 函數通過迭代 facts 數組來工作。然后，它使用 template Literal 語法創建 fact 對象 的 HTML 表示形式。
const showfacts = (facts) => {
facts.forEach(fact => {
const factEl = document.createElement('blockfact');
factEl.classList.add('fact');
factEl.innerHTML = `
${fact.fact}
`;
factsEl.appendChild(factEl);
});
};
登錄后復制
生成的 blockFact 元素的示例是：
<blockfact class="fact">
Unlike dogs, cats do not have a sweet tooth. Scientists believe this is due to a mutation in a key taste receptor.
</blockfact>
登錄后復制
我們利用 appendChild 函數將 <blockfact> 元素添加到容器中。
6.顯示和隱藏加載指示器
當用戶到達頁面末尾時，必須顯示加載指示器。為此，我們將引入兩個函數：一個用于加載，另一個用于隱藏加載器。我們將使用 opacity: 1 顯示加載程序，并使用 opacity: 0 隱藏加載程序。添加和刪??除 opacity 將分別顯示/隱藏加載程序。
const hideLoader = () => {
loader.classList.remove('show');
};
const showLoader = () => {
loader.classList.add('show');
};
登錄后復制
7.查看更多有趣的事實
為了提高性能，我們將引入一個函數來檢查 API 是否有更多事實。如果還有更多項目要獲取，則 hasMoreFacts() 函數將返回 true。如果沒有更多項目可供獲取，API 調用將停止。
const hasMorefacts = (page, limit, total) => {
const startIndex = (page - 1) * limit + 1;
return total === 0 || startIndex < total;
};
登錄后復制
8. 編寫 loadFacts 函數代碼
loadFacts 函數負責執行這些重要操作：
顯示或隱藏加載指示器
調用 getFacts 函數獲取更多事實
展示事實
const loadfacts = async (page, limit) => {
// show the loader
showLoader();
try {
// if having more facts to fetch
if (hasMorefacts(page, limit, total)) {
// call the API to get facts
const response = await getfacts(page, limit);
// show facts
showfacts(response.data);
// update the total
total = response.total;
}
} catch (error) {
console.log(error.message);
} finally {
hideLoader();
}
};
登錄后復制
從某種意義上說，這種實現的一個缺點是它的運行速度。大多數時候您不會看到加載指示器，因為 API 可以很快返回。如果您想在每次滾動時查看加載指示器，可以使用 setTimeout 函數。調整 setTimeout 函數的 delay 將決定加載指示器顯示的時間長度。
9. 處理滾動事件
當用戶滾動到頁面底部時，需要一個scroll事件處理程序來調用loadFacts函數。如果滿足以下條件，該函數將被調用：
滾動條已到達頁面底部
還有更多事實需要加載
為了實現滾動事件，我們將使用三個窗口屬性：
window.scrollHeight 給出整個文檔的高度。
window.scrollY 給出了用戶滾動文檔的距離。
window.innerHeight 給出可見窗口的高度。
下圖更好地概述了上述屬性。另外，您將能夠理解，如果 innerHeight 和 scrollY 之和等于或大于 scrollHeight，則到達文檔末尾，此時必須加載更多有趣的事實。
window.addEventListener('scroll', () => {
const {
scrollTop,
scrollHeight,
clientHeight
} = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 5 &&
hasMoreFacts(currentPage, limit, total)) {
currentPage++;
loadFacts(currentPage, limit);
}
}, {
passive: true
});
登錄后復制
10.初始化頁面
無限滾動的最后一步是初始化頁面。調用 loadFacts 來加載第一組有趣的事實非常重要。
loadfacts(currentPage, limit);
登錄后復制
現場演示
結論
現在，我們在 JavaScript 中實現了一個簡單的無限滾動，每當用戶滾動時，它將獲取并呈現有關貓的有趣事實。這只是無限滾動最常用的方法之一。
以上就是JavaScript和REST API實現無限滾動分頁的詳細內容，更多請關注www.92cms.cn其它相關文章！
