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

WBOY 原创: 2023-09-11 22:41:05 345浏览

无限滚动分页的灵感来自 Facebook 和 Twitter 等网站。这只是分页，当用户滚动到页面底部时，会加载更多内容。这可以确保页面上始终有更多内容供用户阅读，从而改善网站上的用户体验。

正确执行无限滚动分页

当实现无限滚动分页时，有一些非常重要的要点需要记住。

1.不要将重要链接放在底部

重要链接不应位于页面底部。这是因为每次用户尝试向下滚动查找它们时，都会加载一组新的条目。所有重要的链接都应固定在侧边栏上或永久保留在顶部。

2.提前计划

计划好要在何处包含分页以及如何处理它非常重要。进行分页的常见方法是在页面底部列出页码。但是，当您使用无限滚动方法时，文章列表的末尾将不再出现页码，因为不再需要它们。只要您不在页脚部分包含大量信息，此分页就可以用于所有主题，因为它可能无法达到预期的效果。

在本教程中，我们将学习如何在 JavaScript 中实现无限滚动功能。

该页面将显示有关猫的有趣事实列表，这些信息将来自 API。该 API 默认返回 10 个有趣的事实。当您滚动到页面底部时，应用程序将显示一个指示器来指示应用程序的加载状态。同时，应用程序将调用 API 来加载下一组有趣的事实。

我们将使用此 URL 来加载有趣的事实。 API 接受查询字符串 page，它告诉 API 要加载哪个页面。

https://catfact.ninja/facts?page=${page}&limit=${limit}

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

现在，让我们开始使用该应用程序。

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，则到达文档末尾，此时必须加载更多有趣的事实。

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

window.addEventListener('scroll', () => {
    const {
        scrollTop,
        scrollHeight,
        clientHeight
    } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 5 &&
        hasMoreFacts(currentPage, limit, total)) {
        currentPage++;
        loadFacts(currentPage, limit);
    }
}, {
    passive: true
});