📅 最后修改于: 2023-12-03 15:39:38.492000 🧑 作者: Mango
Materialize CSS 是一个前端开发框架，提供了丰富的 UI 组件，包括分页（pagination）组件。本文将介绍如何利用 Materialize CSS 创建分页。
首先，需要在 HTML 中引入 Materialize CSS 和 jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- 这里添加分页组件 -->
</body>
</html>
使用 Materialize CSS 创建分页需要借助 JavaScript。首先，在 HTML 中添加一个 ul 元素作为分页组件的容器：
<ul class="pagination"></ul>
然后，在 JavaScript 中初始化分页组件：
$(document).ready(function() {
$('.pagination').pagination({
// 配置项
});
});
在配置项中，我们需要设置以下属性：
total：总页数pageRange：最多显示的页码数量onPageClick：分页链接被点击时的回调函数例如，我们创建一个含有 10 页的分页组件，每次最多显示 5 个页码：
$(document).ready(function() {
$('.pagination').pagination({
total: 10,
pageRange: 5,
onPageClick: function(page, event) {
console.log(page); // 分页链接被点击时打印页码
}
});
});
到此为止，我们已经成功创建了一个简单的分页组件。
Materialize CSS 的分页组件提供了多种样式，例如圆形按钮、翻页箭头等。我们可以通过在组件容器上添加类名来自定义样式：
<ul class="pagination center-align">
<!-- 组件内容 -->
</ul>
上述代码中，我们为组件容器添加了 center-align 类，使分页组件在页面居中对齐。
除此之外，我们还可以在分页链接上添加图标：
<ul class="pagination">
<li class="waves-effect"><a href="#"><i class="material-icons">chevron_left</i></a></li>
<li class="waves-effect"><a href="#">1</a></li>
<li class="waves-effect"><a href="#">2</a></li>
<li class="waves-effect"><a href="#">3</a></li>
<li class="waves-effect"><a href="#">4</a></li>
<li class="waves-effect"><a href="#">5</a></li>
<li class="waves-effect"><a href="#"><i class="material-icons">chevron_right</i></a></li>
</ul>
在上述代码中，我们在分页链接中添加了左右翻页的图标（chevron_left 和 chevron_right）。同时，我们为链接元素添加了 waves-effect 类，以使分页链接拥有水波纹效果。
本文介绍了如何在 Materialize CSS 中创建分页组件。通过配置和自定义样式，我们可以轻松地创建出符合需求的分页组件，提升用户体验。