基础 CSS 分页介绍

分页是许多网站都需要的功能之一，因为它可以将内容分成独立的页面，从而使页面更具可读性和可管理性。本文将介绍如何使用基础 CSS 实现分页。

1. HTML 结构

首先，我们需要为我们的页面定义一个基本的 HTML 结构。假设我们有一个包含文章列表的页面，每个文章的标题和正文都需要分页。

<div class="article">
  <h1>文章标题</h1>
  <p>文章正文内容</p>
</div>

我们需要分页的是 article 标签，因此我们要将其包装在一个用于分页的 wrapper 标签中。

<div class="wrapper">
  <div class="article">
    <h1>文章标题</h1>
    <p>文章正文内容</p>
  </div>
  <div class="article">
    <h1>文章标题</h1>
    <p>文章正文内容</p>
  </div>
  <div class="article">
    <h1>文章标题</h1>
    <p>文章正文内容</p>
  </div>
  <div class="article">
    <h1>文章标题</h1>
    <p>文章正文内容</p>
  </div>
</div>

2. CSS 样式

现在我们已经定义了 HTML 结构，下一步就是使用 CSS 样式来实现分页。我们将使用 display 属性来隐藏或显示每页内容，使用 :nth-child 伪类来选择每页的内容。

首先，我们将为每个元素设置通用的样式，包括设置宽度和高度、边框和内边距等。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding: 16px;
  box-sizing: border-box;
}

.article {
  width: calc(50% - 16px);
  height: 200px;
  padding: 16px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 16px;
}

在上面的样式中，我们使用 flex-wrap 和 calc 属性将文章列表分成两列。

然后，我们使用 nth-child 选择器对每个 article 元素进行样式化。我们将使用一个变量来存储每页显示的文章数，当我们需要更改文章数时，只需更改变量的值。

/* 每页显示的文章数 */
$articles-per-page: 2;

/* 隐藏所有 article，并显示第一页的 article */
.article {
  display: none;
}
.article:nth-child(-n+#{$articles-per-page}) {
  display: block;
}

在上面的样式中，我们将显示第一页的 article，然后将其余的 article 隐藏起来。

3. JavaScript

最后，我们需要一些 JavaScript 代码来动态地更新分页。我们将使用 querySelectorAll 方法来选择所有的 article 元素，并使用 forEach 方法来循环遍历每个元素。我们还将定义一个函数来将每页的文章数作为参数，并在每次更改时调用该函数。

function Pagination(articlesPerPage) {
  const articles = document.querySelectorAll('.article');

  function update() {
    let index = 0;
    articles.forEach((article, i) => {
      if (i < index || i >= index + articlesPerPage) {
        article.style.display = 'none';
      } else {
        article.style.display = 'block';
      }
    });
  }

  update();

  return {
    update,
  };
}

const pagination = new Pagination(2); // 每页显示 2 篇文章

document.querySelector('#prev').addEventListener('click', () => {
  pagination.update(-1); // 在当前页码上减 1
});

document.querySelector('#next').addEventListener('click', () => {
  pagination.update(1); // 在当前页码上加 1
});

4. 结论

在本文中，我们介绍了如何使用基础 CSS 和 JavaScript 实现分页。我们首先定义了 HTML 结构，然后使用 CSS 样式隐藏或显示每页的内容，并使用 JavaScript 代码动态地更新分页。此外，我们还通过使用变量来方便地更改每页显示的文章数。