总结 vue 实现分页器的基本思路
简介
本文介绍基于 vue2 框架实现基本的分页器，包括页码前进/后退、页码点击跳转、显示 ... 、显示总页数、显示总数据条数 等功能。
效果预览
快速跳转
实现思路
视图部分
视图方面比较简单，将各功能部分依次搭建即可，包括前进键（>>）、后退键（<<）、中间以及首尾（1和页码上限）的页码、...、以及页码总计和数据总计。
代码示例
<template>
<div class="pagination">
<div class="pagination_wrap">
<div class="pagination_total-data pagination_info">
<span>共{{ total }}条数据</span>
</div>
<div class="pagination_action-group">
<div
class="prev pagination_btn"
:class="{ disabled: isPrevDisabled }"
:disabled="isPrevDisabled"
@click="handlePrev"
>
<a>«上一页</a>
</div>
<div class="pagination_btn-group" @click="handlePageSelect">
<template v-if="isShowPrevDot">
<li class="pagination_btn">
<a data-page="1">1</a>
</li>
<li class="pagination_dotted">
<span>...</span>
</li>
</template>
<li
class="pagination_btn"
:class="{ active: currentPage === i }"
v-for="i in pageList"
:key="i"
>
<a :data-page="i">{{ i }}</a>
</li>
<template v-if="isShowNextDot">
<li class="pagination_dotted">
<span>...</span>
</li>
<li class="pagination_btn">
<a :data-page="totalPages">{{ totalPages }}</a>
</li>
</template>
</div>
<div
class="next pagination_btn"
:class="{ disabled: isNextDisabled }"
:disabled="isNextDisabled"
@click="handleNext"
>
<a>下一页»</a>
</div>
</div>
<div class="pagination_total-pages pagination_info">
<span>共{{ totalPages }}页</span>
</div>
</div>
</div>
</template>
样式部分
样式部分（scss），通过 Flex 布局使元素水平排列，并赋予基本样式
// 全局 css 变量
:root {
--gap-small: 5px;
--gap-primary: 15px;
}
// 覆盖浏览器默认样式
body {
li {
box-sizing: border-box;
}
// 注意添加下面这条样式，否则部分浏览器在 ... 旁边会显示一个额外的 ·
[class*='dotted']::marker {
content: '';
}
}
.pagination {
width: 100%;
overflow: hidden;
.pagination_wrap {
margin: 18px 0;
display: flex;
justify-content: center;
.pagination_action-group {
margin-left: 0;
margin-bottom: 0;
vertical-align: middle;
display: flex;
.pagination_btn {
line-height: 18px;
display: inline-block;
a {
position: relative;
line-height: 18px;
text-decoration: none;
background-color: #fff;
border: 1px solid #e0e9ee;
font-size: 14px;
padding: 9px 18px;
color: #333;
}
&.active {
a {
background-color: #fff;
color: #e1251b;
border-color: #fff;
cursor: default;
}
}
&.prev,
&.next {
a {
background-color: #fafafa;
cursor: pointer;
}
}
&.disabled {
a {
color: #999;
cursor: default;
}
}
}
.pagination_dotted {
span {
position: relative;
line-height: 18px;
text-decoration: none;
background-color: #fff;
font-size: 14px;
border: 0;
padding: 9px 18px;
color: #333;
}
}
.pagination_btn-group {
display: flex;
}
}
.pagination_info {
color: #333;
font-size: 14px;
}
.pagination_total-data {
margin-right: var(--gap-primary);
}
.pagination_total-pages {
margin-left: var(--gap-primary);
}
}
}
数据和逻辑
接下里是关键的逻辑实现，包括前进、后退、页码点选跳转、显示 ... 等功能。
数据部分
props 中定义的 4 个变量与数据显示相关，通常从服务端获取，且不支持内部修改，因此由父组件传递进来；data 和 computed 中定义的 8 个变量与视图构建或更新相关，属于组件内私有，仅支持内部修改。
props: {
total: Number, // 数据总数
currentPage: Number, // 当前页码数
pagerCount: Number, // 允许同时显示的页码数
totalPages: Number, // 页码总数
},
data() {
return {
pageList: [], // 中间区域显示的页码范围
start: 0, // 中间区域显示的开始页码指针
end: 0, // 中间区域显示的结束页码指针
isShowPrevDot: false,
isShowNextDot: false,
};
},
computed: {
resourceData() {
return { total: this.total, currentPage: this.currentPage };
},
isPrevDisabled() {
return this.currentPage === 1;
},
isNextDisabled() {
return this.currentPage === this.totalPages;
},
// 总页数超过当前允许的同时显示页数，才有可能需要显示 ...
isDotNeeded() {
return this.totalPages > this.pagerCount;
},
},
逻辑处理部分
逻辑处理部分包括：
- 两个内部变量更新方法：setupPageList(start, end) 和 setupPagination(currentPage, totalPages, pagerCount)
- 一个 emit 通知方法：updateCurrentPage(newPage)
- 三个事件处理方法：handlePrev() 、handleNext() 、handlePageSelect(e)
- 一个侦听器：侦听 currentPage 并初始化
methods: {
// 根据开始和结束指针，重新生成中间区域的页码
setupPageList(start, end) {
let pageList = [];
for (let i = start; i <= end; i++) {
pageList.push(i);
}
return pageList;
},
// 根据操作后的当前页码，重新判定是否显示两侧的 ... ，以及更新中间区域的页码范围
setupPagination(currentPage, totalPages, pagerCount) {
// 初始化 start 和 end
let start = 1, end = totalPages;
if (this.isDotNeeded) {
// 从当前页码开始，向左右两侧延伸 pagerCount 一半的距离
let halfOffset= Math.floor(pagerCount / 2, 0);
start = Math.max(1, currentPage - halfOffset);
end = Math.min(totalPages, currentPage + halfOffset);
// 若中间页码数量仍小于 pagerCount，先拉长到 pagerCount
if (end - start + 1 < pagerCount) {
if (end - pagerCount > -1) {
// 左侧仍有剩余页码
start = end - pagerCount + 1;
} else {
end = start + pagerCount - 1;
}
}
// 根据延伸后的左右指针，判定是否需要显示左右两侧的 ...
this.isShowPrevDot = start > 1;
this.isShowNextDot = totalPages - end > 0;
} else {
this.isShowPrevDot = false;
this.isShowNextDot = false;
}
// 根据 ... 的判定结果，赋值两侧指针的最终值
this.start = Math.max(1, start + (this.isShowPrevDot ? 1 : 0));
this.end = Math.min(totalPages, end - (this.isShowNextDot ? 1 : 0));
// 根据最新的指针，生成中间区域的页码
this.pageList = [].concat(this.setupPageList(this.start, this.end));
},
handlePrev() {
const oldPage = this.currentPage;
const newPage = Math.max(1, oldPage - 1);
if (oldPage !== newPage) {
this.updateCurrentPage(newPage);
// 由于侦听器的存在，不需要手动触发分页器更新；next 与 select 同理
// this.setupPagination(newPage);
}
},
handleNext() {
const oldPage = this.currentPage;
const newPage = Math.min(this.totalPages, oldPage + 1);
if (oldPage !== newPage) {
this.updateCurrentPage(newPage);
}
},
handlePageSelect(e) {
const newPage = +e.target.dataset.page;
this.updateCurrentPage(newPage);
},
// 通知父组件修改当前页
updateCurrentPage(newPage) {
this.$emit('updateCurrentPage', newPage);
},
},
// 由于数据从服务端获取，需要在当前组件或作为父组件的业务组件中监听初始数据的变化，并触发分页器的初始化
// 同时，用户改变当前页码时，也会触发分页器更新
watch: {
resourceData: {
// 若只侦听当前页码变化，则数据源变化但当前页未变时无法自动更新
// 因此，改为侦听一个计算属性，该计算属性包含了需要侦听的多个属性： total 和 currentPage
// currentPage: {
immediate: true,
handler() {
this.$nextTick(() => {
this.setupPagination(
this.currentPage,
this.totalPages,
this.pagerCount
);
});
},
},
},
