手写分页器

Vue项目手写page页码实现的方式原理
Search/index.vue

// 组件间传递数据(父给子)
<Pagination
  :pageNo='searchParams.pageNo'
  :pageSize='searchParams.pageSize'
  :total='total'
  :continues='5'
  :@getPageNo="getPageNo"
></Pagination>

// 使用映射mapState映射出total的总数据(数据来源于接口的数据)
// 引入mapState
import { mapGetters, mapState } from "vuex";
computed: {
    ...mapState({
      total: (state) => state.search.searchList.total,
    }),
  },
// 点击页码的自定义的事件
getPageNo(pageNo) {
   // 整理带给服务器的参数
   this.searchParams.pageNo = pageNo;
   this.getData();
  },

Pagination/index.vue

接收过来的数据以及相应的逻辑编写
<template>
  <div class="pagination">
    <!-- 前面部分 -->
    <button
      :disabled="pageNo==1"
      @click="transmitPageNo(pageNo)"
    >上一页</button>
    <button
      v-if="startNumAndEndNum.start> 1"
      @click="transmitPageNoOne(pageNo)"
      :class="{active:pageNo == 1}"
    >1</button>
    <button v-if="startNumAndEndNum.start > 2">···</button>

    <!-- 中间部分 -->
    <button
      v-for="(page,index) in startNumAndEndNum.end"
      :key="index"
      v-if="page >= startNumAndEndNum.start"
      @click="transmitPage(page)"
      :class="{active:pageNo == page}"
    >{{page}}</button>

    <!-- 后面部分 -->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button
      v-if="startNumAndEndNum.end < totalPage"
      @click="transmitTotalPage(totalPage)"
      :class="{active:pageNo == totalPage}"
    >{{totalPage}}</button>
    <button
      :disabled="pageNo == totalPage"
      @click="transmitPageNoTotalPage(pageNo)"
    >下一页</button>

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

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    // 总共多少页
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 计算出连续的页码的起始数字与结束数字,(连续页码的数字至少是5页)
    startNumAndEndNum() {
      // 结构出当前页码，连续页码，总页数
      let { pageNo, continues, totalPage } = this;
      // 先定义两个变量存储起始数字与结束数字
      let start = 0;
      let end = 0;
      // 不正常现象(总页数没有连续页码多)
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        // 正常现象(连续页码数是5，但是总页数一定大于连续页码数5)
        // 起始
        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 };
    },
  },
  methods: {
    // 以下是点击页码的自定义事件触发
    transmitPageNo(pageNo) {
      this.$emit("getPageNo", pageNo - 1);
    },
    transmitPageNoOne(pageNo) {
      this.$emit("getPageNo", 1);
    },
    transmitPage(page) {
      this.$emit("getPageNo", page);
    },
    transmitTotalPage(totalPage) {
      this.$emit("getPageNo", totalPage);
    },
    transmitPageNoTotalPage(pageNo) {
      this.$emit("getPageNo", pageNo + 1);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
.active {
  background-color: skyblue;
}
</style>