PWA 应用如何实现分页与加载更多

前言

随着移动设备的普及，越来越多的用户选择使用 PWA（Progressive Web App）应用来访问网站。PWA 应用具有离线缓存、快速响应、类似原生应用的交互体验等优点，使得它成为了越来越多网站的选择。

然而，对于一些需要大量数据展示的网站而言，如何实现分页与加载更多成为了一大难点。本文将介绍如何在 PWA 应用中实现分页与加载更多。

分页的实现

PWA 应用中实现分页的方法与传统网页应用类似，主要是通过服务器端返回数据时，将数据按照分页的方式返回。在客户端，我们可以使用 JavaScript 来实现分页的逻辑。

客户端实现

首先，我们需要定义一个表示当前页码的变量 currentPage 和一个表示每页数据条数的变量 pageSize。

let currentPage = 1;
const pageSize = 10;

接着，我们需要实现一个函数 loadData，用来从服务器端获取数据。在获取数据时，我们需要将当前页码和每页数据条数传递给服务器端，以便服务器端返回相应的数据。

function loadData() {
  fetch(`/api/data?page=${currentPage}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
      // 处理数据
    });
}

在处理数据时，我们可以将数据渲染到页面上。同时，我们还需要根据数据的总条数计算出总页数，以便后续使用。

// javascriptcn.com 代码示例
function loadData() {
  fetch(`/api/data?page=${currentPage}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
      // 处理数据
      renderData(data.items);

      // 计算总页数
      const totalPages = Math.ceil(data.total / pageSize);

      // 渲染分页器
      renderPager(totalPages);
    });
}

最后，我们需要实现一个函数 renderPager，用来渲染分页器。分页器可以是一个简单的数字按钮，也可以是一个带有上一页和下一页按钮的复杂控件。在这里，我们使用一个简单的数字按钮来演示。

// javascriptcn.com 代码示例
function renderPager(totalPages) {
  const pager = document.querySelector('.pager');
  pager.innerHTML = '';

  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.innerText = i;
    button.addEventListener('click', () => {
      currentPage = i;
      loadData();
    });
    pager.appendChild(button);
  }
}

当用户点击分页器中的按钮时，我们更新当前页码，重新获取数据，并重新渲染分页器和数据。

服务器端实现

在服务器端，我们需要根据客户端传递过来的参数，从数据库中查询相应的数据，并返回给客户端。在返回数据时，我们需要同时返回数据的总条数，以便客户端计算出总页数。

// javascriptcn.com 代码示例
app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page);
  const pageSize = parseInt(req.query.pageSize);
  const offset = (page - 1) * pageSize;

  const data = db.query(`SELECT * FROM table LIMIT ${offset}, ${pageSize}`);
  const total = db.query(`SELECT COUNT(*) FROM table`);

  res.json({
    items: data,
    total: total
  });
});

加载更多的实现

与分页类似，加载更多也是一种常见的数据展示方式。在加载更多中，我们通过不断地获取新数据，实现数据的无限滚动效果。在 PWA 应用中，我们可以使用 IntersectionObserver API 来实现加载更多的效果。

客户端实现

首先，我们需要定义一个表示当前页码的变量 currentPage 和一个表示每页数据条数的变量 pageSize。同时，我们还需要定义一个表示数据是否正在加载的变量 loading，以便避免重复加载数据。

let currentPage = 1;
const pageSize = 10;
let loading = false;

接着，我们需要实现一个函数 loadData，用来从服务器端获取数据。在获取数据时，我们需要将当前页码和每页数据条数传递给服务器端，以便服务器端返回相应的数据。

// javascriptcn.com 代码示例
function loadData() {
  fetch(`/api/data?page=${currentPage}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
      // 处理数据
      renderData(data.items);

      // 判断是否还有更多数据
      const hasMoreData = data.items.length < data.total;

      // 更新 loading 状态
      loading = false;

      if (hasMoreData) {
        // 注册 IntersectionObserver
        registerIntersectionObserver();
      }
    });
}

在处理数据时，我们可以将数据渲染到页面上。同时，我们还需要判断是否还有更多数据需要加载。如果还有更多数据，我们需要注册 IntersectionObserver API。

// javascriptcn.com 代码示例
function registerIntersectionObserver() {
  const observer = new IntersectionObserver(entries => {
    const entry = entries[0];
    if (entry.isIntersecting && !loading) {
      // 更新当前页码
      currentPage++;

      // 设置 loading 状态
      loading = true;

      // 加载更多数据
      loadData();

      // 停止观察
      observer.disconnect();
    }
  });

  const sentinel = document.querySelector('.sentinel');
  observer.observe(sentinel);
}

在注册 IntersectionObserver API 时，我们需要传递一个回调函数。当目标元素进入视口时，回调函数会被调用，我们可以在回调函数中加载更多数据。在加载更多数据时，我们需要更新当前页码和 loading 状态，并重新注册 IntersectionObserver API。

服务器端实现

在服务器端，我们需要根据客户端传递过来的参数，从数据库中查询相应的数据，并返回给客户端。在返回数据时，我们需要同时返回数据的总条数，以便客户端判断是否还有更多数据需要加载。

// javascriptcn.com 代码示例
app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page);
  const pageSize = parseInt(req.query.pageSize);
  const offset = (page - 1) * pageSize;

  const data = db.query(`SELECT * FROM table LIMIT ${offset}, ${pageSize}`);
  const total = db.query(`SELECT COUNT(*) FROM table`);

  res.json({
    items: data,
    total: total
  });
});

总结

本文介绍了如何在 PWA 应用中实现分页与加载更多。在客户端，我们可以使用 JavaScript 和 IntersectionObserver API 来实现分页和加载更多的逻辑。在服务器端，我们需要根据客户端传递过来的参数，从数据库中查询相应的数据，并返回给客户端。

对于需要大量数据展示的网站而言，分页和加载更多是两种非常常见的数据展示方式。通过本文的介绍，相信读者已经掌握了如何在 PWA 应用中实现分页和加载更多的技术。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b7e787d4982a6eb5d58ec