前端分页功能核心知识点
1. 数据定义
-
数据源：定义一组数据（如
items），每个数据项包含唯一标识（如id）和展示内容（如name）。 -
分页参数：
currentPage：当前页码，默认为 1。itemsPerPage：每页显示条数，默认为 5。
2. 计算属性
- 总页数：通过
Math.ceil(items.length / itemsPerPage)计算总页数。 - 当前页数据：根据
currentPage和itemsPerPage，使用slice方法截取当前页的数据。
3. 分页逻辑
- 分页按钮生成：根据
totalPages，动态生成分页按钮。 - 页码切换：点击分页按钮时，更新
currentPage，重新计算当前页数据。 - 每页条数切换：当用户修改
itemsPerPage时，重置currentPage为 1。
4. 样式与交互
- 分页按钮样式：为当前页按钮添加特殊样式（如高亮显示）。
- 用户交互：通过
@click和@change事件处理用户点击和选择操作。
5.前端分页Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端分页 Demo</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<style>
.pagination {
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
cursor: pointer;
}
.pagination button.active {
background-color: #42b983;
color: white;
}
.page-size-select {
margin-top: 10px;
}
.total-items {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<h1>分页 Demo</h1>
<div class="page-size-select">
<label for="page-size">每页显示条数：</label>
<select id="page-size" v-model="itemsPerPage" @change="resetPage">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
<div class="total-items">
总条数：{{ items.length }}
</div>
<ul>
<li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
</ul>
<div class="pagination">
<button v-for="page in totalPages" :key="page" @click="currentPage = page"
:class="{ active: currentPage === page }">
{{ page }}
</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [{
id: 1,
name: 'Item 1'
},
{
id: 2,
name: 'Item 2'
},
{
id: 3,
name: 'Item 3'
},
{
id: 4,
name: 'Item 4'
},
{
id: 5,
name: 'Item 5'
},
{
id: 6,
name: 'Item 6'
},
{
id: 7,
name: 'Item 7'
},
{
id: 8,
name: 'Item 8'
},
{
id: 9,
name: 'Item 9'
},
{
id: 10,
name: 'Item 10'
},
{
id: 11,
name: 'Item 11'
},
{
id: 12,
name: 'Item 12'
},
{
id: 13,
name: 'Item 13'
},
{
id: 14,
name: 'Item 14'
},
{
id: 15,
name: 'Item 15'
},
{
id: 16,
name: 'Item 16'
},
{
id: 17,
name: 'Item 17'
},
{
id: 18,
name: 'Item 18'
},
{
id: 19,
name: 'Item 19'
}
],
currentPage: 1, // 当前页码
itemsPerPage: 5, // 每页显示条数
},
computed: {
totalPages() {
return Math.ceil(this.items.length / this.itemsPerPage);
},
paginatedItems() {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.items.slice(start, end);
}
},
methods: {
resetPage() {
// 当每页条数改变时，重置当前页码为第一页
this.currentPage = 1;
}
}
});
</script>
</body>
</html>
