使用 JavaScript 和 REST API 实现无限滚动分页

无限滚动分页的灵感来自 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 文件中包含几个部分。A 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总是返回 a 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可以使用一个函数。调整delay您的setTimeout功能将决定加载指示器显示多长时间。

9. 处理滚动事件

当用户滚动到页面底部时，scroll event handler需要调用该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.初始化页面

Infinite Scroll 的最后一步是初始化页面。重要的是调用loadFacts, 以加载第一组有趣的事实。

loadfacts(currentPage, limit);

现场演示

See the Pen  Javascript Infinite Scrolling by Envato Tuts+ (@tutsplus)  on CodePen.

结论

现在，我们已经在 JavaScript 中实现了一个简单的 Infinite Scroll，它会在用户滚动时获取并呈现关于猫的有趣事实。这只是无限滚动最常用的方法之一。