字节面试官：既然你啥都会，那你实现一个分页器吧

前言

银五金六，你申哥我又回来了，我一直以为自己狂的所有面试都能通过。所以才有了下面的一幕。。。这次是一个字节跳动的二面，晚上8点开始，首先是一段自我介绍，我叫申哥，21年来自XX学院,熟悉vue2，vue3源码，各种组件库源码，webpack源码，一阵狂吹之后，首先让我写了一个列表，样式类似下面这种：

我天，字节跳动就考这么so easy 的东西？这还不进大厂？三下五除，我便写出来了。之后是一个分页选择器，我写着写着就把自己写哭了，太tmd难了！！

需求

大概让我实现一个100页，显示第一页和最后一页，有省略号的分页器，效果如下：

1652925693031

准备阶段

楼主目前主要使用vue项目，所以只讲vue实现不过你是react用户大体思路可以参考一下

element UI 分页器 Demo 地址 element.eleme.cn/#/zh-CN/com…
element ui 源码 地址： github.com/ElemeFE/ele…
随便找一个vue项目或者使用 vue create App 命令自己用脚手架搭建一个项目，方便使用vue项目

分页器如何使用

  <el-pagination
       :current-page="currentPage4"
       :page-size="100"
       :total="400">
     </el-pagination>
复制代码

pagination分页器的属性比较多，我们就不全都实现了，只是实现它的核心部分，就是中间的切换页码的按钮

主要使用的属性

属性名	含义
pageSize	每页显示条目个数
total	总条目数
pageCount	总页数
pagerCount	页码按钮的数量，当总页数超过该值时会折叠
currentPage	当前页数
disabled	是否禁用

实现分页器

步骤一: 分析分页器结构

步骤二: 首页和尾页

第一页和尾页一定会显示, onPagerClick 事件之所以写在Ul上，是利用了事件委托，使当点击某个li的时候都会触发onPagerClick，为了简化内容，css写在最后

 <template>
     <ul @click="onPagerClick" class="el-pager">
         <!-- 首页 -->
         <li
             :class="{ active: currentPage === 1, disabled }"
             v-if="pageCount > 0"
             class="number"
         >
             1
         </li>
         <!-- 最后一页 -->
         <li
             :class="{ active: currentPage === pageCount, disabled }"
             class="number"
             v-if="pageCount > 1"
         >
             {{ pageCount }}
         </li>
     </ul>
 </template>
复制代码

步骤三: 前省略号和后面省略号显示判断

pageCount 总页数, pagerCount 页码按钮的数量，当总页数超过该值时会折叠,即pageCount > pagerCount

  // 当前页大于按钮数量的一半,左面的省略号显示
 // 这里举个例子，比如最多展示7个按钮(pagerCount为7)，则只要当前页大于3的时候，左面的省略号显示
 if (currentPage > (pagerCount + 1) / 2) {
    showPrevMore = true
 }
复制代码

  // 当前页比中间页码小的时候，右面的省略号一定显示
 if (currentPage < pageCount - halfPagerCount) {
    showNextMore = true
 }
复制代码

// 页码数量 > 页码按钮的数量，当总页数超过该值时会折叠
// 此时需要显示折叠按钮
/* 处理省略号-start */
if (pageCount > pagerCount) {
    // 当前页大于按钮数量的一半,左面的省略号显示
    // 这里举个例子，比如最多展示7个按钮(pagerCount为7)，则只要当前页大于3的时候，左面的省略号显示
    if (currentPage > (pagerCount + 1) / 2) {
        showPrevMore = true
    } // 当前页比中间页码小的时候，右面的省略号一定显示
    if (currentPage < pageCount - halfPagerCount) {
        showNextMore = true
    }
}

复制代码

步骤四：省略号中间分页按钮

 /* 处理剩余显示的按钮-start */
 // array数组为要显示的页码数字的集合
 const array = []
 // 当前页在页码的右半部分
 // 只显示左面的省略号，则array为...8， 9, 10,直到最大页码数
 if (showPrevMore && !showNextMore) {
     const startPage = pageCount - (pagerCount - 2)
     for (let i = startPage; i < pageCount; i++) {
         array.push(i)
     }
     //
     // 只显示右面的省略号 当前页在页码的左半部分
 } else if (!showPrevMore && showNextMore) {
     // 这种情况比较简单2, 3, 4...
     for (let i = 2; i < pagerCount; i++) {
         array.push(i)
     }
     // 左右两边省略号都显示
 } else if (showPrevMore && showNextMore) {
     // Math.floor(pagerCount / 2)  的意思是取中间分页按钮的左右一边， -1 是因为要减去第一页和最后一页
     const offset = Math.floor(pagerCount / 2) - 1
     for (let i = currentPage - offset; i <= currentPage + offset; i++) {
         array.push(i)
     }
 } else {
     // 没有省略号，则依次显示分页按钮
     for (let i = 2; i < pageCount; i++) {
         array.push(i)
     }
 }
 
复制代码