Vue手写分页器

如何封装一个分页器组件

文章最后会提供源码

分析与代码部分

需要分页器的原因：从服务器中获取的数据很多，如果全部一次性加载会导致卡顿，用户体验差

我们写一个分页器需要的外部数据（即使用该分页器组件时需要通过props传入的数据）：

1. 当前是第几页 pageNo

2. 每一页展示多少数据 pageSize

3. 整个分页器一共有多少数据 total

4. 分页器连续页码个数 continues（通常是奇数5 / 7，一般要求对称）

ps：其中暗含一个隐藏数据：整个分页器一共有多少页 Math.ceil(total / pageSize)

---

下面开始写代码：

计算连续页码的起始数字与结束数字

连续页码就是分页器中按数字顺序连续显示的页码，个数为 continues

例如上图中的 3、4、5、6、7 这5个页码，我们要先计算出这几个连续页码的开始页码和结束页码

逻辑：当前页码为第n页，假设continues = 5，那么起始数字为n-2，结束数字为n+2

// computed中
totalPage() {
   
	return Math.ceil(this.total / this.pageSize);
},
// 连续页码起始数字与结束数字
startNumAndEndNum() {
   
    const {
    pageNo, totalPage, continues } = this;
    let start = 0;
    let end = 0;
    // 如果总页数少于连续页码数，只展示 1~最后页码数 即可
    if (totalPage < continues) {
   
        start = 1;
        end = totalPage;
    // 如果总页数大于等于连续页码数
    } else {
   
        start = pageNo - Math.floor(continues / 2);
        end = pageNo + Math.floor(continues / 2);
        // start为 0 / 负数
        if (start < 1) {
   
            start = 1;
            end = continues;
        }
        // end大于总页数
        if (end > totalPage) {
   
            start = totalPage - continues + 1;
            end = totalPage;
    	}
}
	return {
   start, end};
},

连续页码数组

// computed中
pagesArr() {
   
    let arr = [];
    let pageNum = this.startNumAndEndNum.start;
    arr.length = (this.totalPage < this.continues ? this.totalPage : this.continues);
    for (let i = 0; i < arr.length; i++) {
   
        arr[i] = pageNum;
        pageNum++;
    }
    return arr
}

渲染数据

<ul>
    <li class="prev disabled">