手写一个简单的分页器

封装分页器

---

1. 前言

分页器基本上是任何网站必须要有的一个组件，为什么需要分页器，当后台传入了大量的数据，那么在前端拿到数据，如果直接展示很有可能或造成卡顿，同时消耗过多的内存，给用户带来的浏览效果就不好。所以，分页器的使用可以一次性只展示部分数据，用户可以非常方便的跳转不同的页面来访问内容。虽然现在很多的UI库都有这个组件，使用也非常的方便，但是我们也应该要知道，怎么手写一个分页器。

2. 准备

先搭建一个静态的分页器。效果如下图。

<template>
  <div class="pagination">
    <button>上一页</button>
    <button>1</button>
    <button>...</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>...</button>
    <button>11</button>
    <button>下一页</button>
    <button style="margin-left: 30px">共 11 条</button>
 </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Pagination'
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
.active {
  background: skyblue;
}
</style>

​ 既然是封装组件，那么就要考虑当其他组件在使用时，需要传递什么参数，这就要去思考分页器需要些什么。首先，必须知道当前的页数，是第一页还是第二页；其次，每一页需要展示多少数据；再次，一共有多少条数据；最后：分页器连续的页面个数（看上面的图片，页面之间会有省略号，意思就是如果我设置连续的页数是3，那么如果有10页，当前是第5页，页面中显示的就是应该是 1 … 4 5 6… 10,其余的就不展示，用省略号代替）

​ 综上，我们需要其他组件（父组件）在使用传递四个参数

// pageNo: 当前的页数，pageSize：每一页展示数据的量 total：总数 continues：连续的页数
<Pagination :pageNo="2" :pageSize="3" :total="91" :continues="3">
    
// 在pagination中接收参数
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Pagination',
  props: ['pageNo', 'pageSize', 'total', 'continues'],
}

那么到这儿，前期的准备就差不多了，下面我们就要开始书写里面的逻辑。

3. 逻辑设计

在我们拿到父组件传递过来的数据，我们需要计算两个属性的值，分别是：总共多少页和连续页面的起始数字和结束数字。下面我先计算总共多少页。

// 这是我在app.vue中设置的默认值
<Pagination :pageNo="1" :pageSize="5" :total="90" :continues="3"></Pagination>

// pagination.vue
// 计算一共有多少页,用总的页数/每页展示的数据量，因为结果可能为小数，所有这里向上取整
totalPage() {
  return Math.ceil(this.total / this.pageSize);
}

// 绑定数据
<button style="margin-left: 30px">共 {{totalPage}} 页</button>
<button style="margin-left: 30px">共 {{total}} 条</button>

效果展示

第二步，就是计算连续页面的起始位置。

	//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是3]
    startNumAndEndNum() {
      const { continues, pageNo, totalPage } = this
      //先定义两个变量存储起始数字与结束数字
      let start = 0,
        end = 0
      //连续页码数字3【就是至少3页】，如果出现不正常的现象【就是不够3页】
      //不正常现象【总页数没有连续页码多】
      if (continues > totalPage) {
        start = 1
        end = totalPage
      } else {
        //正常现象【连续页码3，但是你的总页数一定是大于3的】
        //起始数字
        start = pageNo - parseInt(continues / 2)
        //结束数字
        end = pageNo + parseInt(continues / 2)
        //把出现不正常的现象【start数字出现0|负数】纠正
        if (start < 1) {
          start = 1
          end = continues
        }
        //把出现不正常的现象[end数字大于总页码]纠正
        if (end > totalPage) {
          end = totalPage
          start = totalPage - continues + 1
        }
      }
      return { start, end }
    }

到这里，分页器两大主功能就写好了，接下来处理页面展示的页码。由于每次点击这些页码按钮，我们都必须知道当前是第几页，或者又比如点击上一页，当前的页面数要减一，所有我们需要在父组件中设置一个函数来把当前的页数传递给pagonation组件。

<Pagination :pageNo="page" :pageSize="5" :total="90" :continues="3" @getPageNo="getPageNo"></Pagination>
<script>
import Pagination from "@/components/Pagination.vue"
export default {
  name: 'App',
  data() {
    return {
      // 初始化页数
      page:1
    }
  },
  components: {
    Pagination
  },
  methods: {
    getPageNo(page) {
      this.page = page;
    }
  }
}
</script>

整体把分页器分成三个部分，包括最左边的上一页、起始页1、和…，中间部分的连续页面数，最右边的…,尾页，下一页，总页数，总数据数。

 <!-- 左 -->
	<!-- 这里需要判断，当目前的页数是第一页时，就禁用该按钮，否则会出现错误，点击的时候，就调用父组件的函数，让当前选中的页数减一 -->
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>
	<!-- 这里要注意，之所以要判断是是否展示该按钮是因为循环的时候是从1开始的，如果不加以判断，当startNumAndEndNum.start = 1时页面就会出现两个按钮1 -->
    <button
      v-if="startNumAndEndNum.start > 1"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo == 1 }"
    >
      1
    </button>
	<!--  只有当连续页数的起始值大于2，才需要显示...-->
    <button v-if="startNumAndEndNum.start > 2">···</button>
    <!-- 中间 -->
	<!-- 通过循环在连续页面的限制先展示相应的按钮页码，只有大于startNumAndEndNum.start的页面才会展示 -->
    <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
    <button v-for="(page, index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo', page)" :class="{ active: pageNo == page }">
      {{ page }}
    </button>

    <!-- 右 -->
	<!--  只有当连续页数的终止值小于页面总数减一时，才需要显示...-->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
	<!--  这里也和按钮1一样，如果连续页面的终止值小于总页数就展示，否则会出现两个尾页按钮-->
    <button
      v-if="startNumAndEndNum.end < totalPage"
      @click="$emit('getPageNo', totalPage)"
      :class="{ active: pageNo == totalPage }"
    >
      {{ totalPage }}
    </button>
	<!-- 点击时页码数减一，当前是最后一页时静止 -->
    <button
      :disabled="pageNo == totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >
      下一页
    </button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>

看看效果

4 全部代码

父组件

<template>
  <div id="app">
    <h1>我是app</h1>
    <Pagination :pageNo="page" :pageSize="5" :total="90" :continues="3" @getPageNo="getPageNo"></Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue"
export default {
  name: 'App',
  data() {
    return {
      // 初始化页数
      page:1
    }
  },
  components: {
    Pagination
  },
  methods: {
    getPageNo(page) {
      this.page = page;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Pagination

<template>
  <div class="pagination">
    <!-- 上 -->
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>
    <button
      v-if="startNumAndEndNum.start > 1"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo == 1 }"
    >
      1
    </button>
    <button v-if="startNumAndEndNum.start > 2">···</button>
    <!-- 中间部分 -->
    <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
    <button v-for="(page, index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo', page)" :class="{ active: pageNo == page }">
      {{ page }}
    </button>

    <!-- 下 -->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button
      v-if="startNumAndEndNum.end < totalPage"
      @click="$emit('getPageNo', totalPage)"
      :class="{ active: pageNo == totalPage }"
    >
      {{ totalPage }}
    </button>
    <button
      :disabled="pageNo == totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >
      下一页
    </button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>
 </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Pagination',
  props: ['pageNo', 'pageSize', 'total', 'continues'],
  computed: {
    // 计算一共有多少页,用总的页数/每页展示的数据量，因为结果可能为小数，所有这里向上取整
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是3]
    startNumAndEndNum() {
      const { continues, pageNo, totalPage } = this
      //先定义两个变量存储起始数字与结束数字
      let start = 0,
        end = 0
      //连续页码数字3【就是至少3页】，如果出现不正常的现象【就是不够3页】
      //不正常现象【总页数没有连续页码多】
      if (continues > totalPage) {
        start = 1
        end = totalPage
      } else {
        //正常现象【连续页码3，但是你的总页数一定是大于3的】
        //起始数字
        start = pageNo - parseInt(continues / 2)
        //结束数字
        end = pageNo + parseInt(continues / 2)
        //把出现不正常的现象【start数字出现0|负数】纠正
        if (start < 1) {
          start = 1
          end = continues
        }
        //把出现不正常的现象[end数字大于总页码]纠正
        if (end > totalPage) {
          end = totalPage
          start = totalPage - continues + 1
        }
      }
      return { start, end }
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
.active {
  background: skyblue;
}
</style>