【前端】手写一个简单的分页器

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/914107.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何在Linux中使用Cron定时执行SQL任务

如何在Linux中使用Cron定时执行SQL任务

文章目录 前言一、方案分析二、使用步骤1.准备脚本2.crontab脚本执行 踩坑 前言 演示数据需要每天更新监控数据&#xff0c;不想手动执行&#xff0c;想到以下解决方案 navicat 创建定时任务java服务定时执行linux crontab 定时执行sql脚本 一、方案分析 我选择了第三个方案…
阅读更多...
超好用shell脚本NuShell mac安装

超好用shell脚本NuShell mac安装

利用管道控制任意系统 Nu 可以在 Linux、macOS 和 Windows 上运行。一次学习&#xff0c;处处可用。 一切皆数据 Nu 管道使用结构化数据&#xff0c;你可以用同样的方式安全地选择&#xff0c;过滤和排序。停止解析字符串&#xff0c;开始解决问题。 强大的插件系统 具备强…
阅读更多...
过程自动化的新黄金标准：Ethernet-APL

过程自动化的新黄金标准：Ethernet-APL

| Ethernet-APL为终客户和设备制造商带来益处 Ethernet-APL&#xff08;Advanced Physical Layer&#xff0c;高级物理层&#xff09;是一种两线制以太网物理层&#xff0c;它使用了由IEEE 802.3cg所定义的10BASE-T1L&#xff0c;并采用了新的工艺制造规定&#xff0c;因此构成…
阅读更多...
扫雷游戏代码分享(c基础)

扫雷游戏代码分享(c基础)

hi , I am 36. 代码来之不易&#x1f44d;&#x1f44d;&#x1f44d; 创建两个.c 一个.h 1&#xff1a;test.c #include"game.h"void game() {//创建数组char mine[ROWS][COLS] { 0 };char show[ROWS][COLS] { 0 };char temp[ROWS][COLS] { 0 };//初始化数…
阅读更多...
OceanBase 应用实践：如何处理数据空洞，降低存储空间

OceanBase 应用实践：如何处理数据空洞，降低存储空间

问题描述 某保险行业客户的核心系统&#xff0c;从Oracle 迁移到OceanBase之后&#xff0c;发现数据存储空间出现膨胀问题&#xff0c;数据空间 datasize9857715.48M&#xff0c;实际存储占用空间17790702.00M。根据 required_mb - data_mb 值判断&#xff0c;数据空洞较为严重…
阅读更多...
算法学习第一弹——C++基础

算法学习第一弹——C++基础

早上好啊&#xff0c;大佬们。来看看咱们这回学点啥&#xff0c;在前不久刚出完C语言写的PTA中L1的题目&#xff0c;想必大家都不过瘾&#xff0c;感觉那些题都不过如此&#xff0c;所以&#xff0c;为了我们能更好的去处理更难的题目&#xff0c;小白兔决定奋发图强&#xff0…
阅读更多...
立体工业相机提升工业自动化中的立体深度感知

立体工业相机提升工业自动化中的立体深度感知

深度感知对仓库机器人应用至关重要&#xff0c;尤其是在自主导航、物品拾取与放置、库存管理等方面。 通过将深度感知与各种类型的3D数据&#xff08;如体积数据、点云、纹理等&#xff09;相结合&#xff0c;仓库机器人可以在错综复杂环境中实现自主导航&#xff0c;物品检测…
阅读更多...
【测试框架篇】单元测试框架pytest（3）：用例执行参数详解

【测试框架篇】单元测试框架pytest（3）：用例执行参数详解

一、前言 上一篇内容介绍了用例编写的规则以及执行用例&#xff0c;执行用例时我们发现有些print输出内容&#xff0c;结果没有给我们展示&#xff0c;这是因为什么原因呢&#xff1f;接下来我们会针对这些问题进行阐述。 二、参数大全 我们可以在cmd中通过输入 pytest -h 或…
阅读更多...
web安全测试渗透案例知识点总结（上）——小白入狱

web安全测试渗透案例知识点总结（上）——小白入狱

目录 一、Web安全渗透测试概念详解1. Web安全与渗透测试2. Web安全的主要攻击面与漏洞类型3. 渗透测试的基本流程 二、知识点详细总结1. 常见Web漏洞分析2. 渗透测试常用工具及其功能 三、具体案例教程案例1&#xff1a;SQL注入漏洞利用教程案例2&#xff1a;跨站脚本&#xff…
阅读更多...
罕见的 iPhone 14 Pro 原型机固态按钮设计曝光

罕见的 iPhone 14 Pro 原型机固态按钮设计曝光

虽然 iPhone 16 已出&#xff0c;但是看看苹果旧的原型机也很有趣&#xff0c;因为它可以展示苹果在开发过程中一些被舍弃的细节。现在&#xff0c;一款罕见的 iPhone 14 Pro 原型机可以看到了传闻中的触觉音量按钮的样子。 2022 年初关于 iPhone 15 Pro 的第一个传闻表明&…
阅读更多...
STM32H750 COMP模拟比较器

STM32H750 COMP模拟比较器

STM32H750 COMP模拟比较器 &#x1f516;STM32H750内置两个超低功耗比较器通道&#xff08;COMP1 和 COMP2&#xff09;. &#x1f4c4;功能应用&#xff1a; 在模拟信号的触发下从低功耗模式唤醒模拟信号调理与定时器的 PWM 输出结合使用时&#xff0c;构成逐周期电流控制环路…
阅读更多...
5G智能对讲终端|北斗有源终端|北斗手持机|单兵|单北斗

5G智能对讲终端|北斗有源终端|北斗手持机|单兵|单北斗

在当今这个快速发展的数字化时代&#xff0c;5G技术的广泛应用正以前所未有的速度推动着各行各业的变革。作为这一技术浪潮中的重要一环&#xff0c;5G智能终端QM630D凭借其卓越的性能和多样化的功能&#xff0c;在林业、渔业、安保、电力、交通等多个领域展现出了巨大的应用潜…
阅读更多...
动态规划习题其七【力扣】【算法学习day.29】

动态规划习题其七【力扣】【算法学习day.29】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…
阅读更多...
Selenium+Pytest自动化测试框架 ------ 禅道实战

Selenium+Pytest自动化测试框架 ------ 禅道实战

前言 有人问我登录携带登录的测试框架该怎么处理&#xff0c;今天就对框架做一点小升级吧&#xff0c;加入登录的测试功能。 选用的测试网址为我电脑本地搭建的禅道 更改了以下的一些文件,框架为原文章框架主体 conftest.py更改 conftest.py #!/usr/bin/env python3 # -*…
阅读更多...
DICOM图像知识：深入讲解DICOM彩色图像的处理

DICOM图像知识：深入讲解DICOM彩色图像的处理

目录 引言 1. DICOM彩色图像概述 1.1 什么是DICOM彩色图像？ 1.2 DICOM中的彩色图像表示 2. CT值（Hounsfield Units）与RGB色彩空间 2.1 CT值（Hounsfield Units, HU）简介 2.2 RGB色彩空间简介 3. CT值转换为RGB显示 3.1 为什么需要转换？ 3.2 转换方法概述 3.3 色…
阅读更多...
使用wordpress搭建简易的信息查询系统

使用wordpress搭建简易的信息查询系统

背景 当前有这样的一个需求&#xff0c;要实现让客户能够自助登录系统查询一些个人的信息&#xff0c;市面上没有特别符合我的需求的产品&#xff0c;经过一段时间的研究&#xff0c;想出了一个用wordpress实现简易信息查询系统&#xff0c;有两种方式。 方式一&#xff1a;使…
阅读更多...
O-RAN简介

O-RAN简介

O-RAN简介 概览 如今，全球蜂窝数据使用量持续增长，因此，电信系统必须随之进行革新，才能满足这一需求量。虽然5G标准能够满足更高的蜂窝吞吐量需求，且有望实现各种新的应用场景，但如果网络没有进行相应的改进，许多拟定的5G应用只能是纸上谈兵。以高可靠低延时通信(URLL…
阅读更多...
ssm100医学生在线学习交流平台+vue(论文+源码)_kaic

ssm100医学生在线学习交流平台+vue(论文+源码)_kaic

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;医学生在线学习交流平台当然也不能排除在外&#xff0c;随着医学生在线学习交流平台的不断成熟&#xff0c;它彻底改变了过去传统的管理方式&a…
阅读更多...
Fortinet Security Fabric安全平台

Fortinet Security Fabric安全平台

Fortinet Security Fabric安全平台 Fortinet Security Fabric 是由 FortiOS 支持的业内出类拔萃的网络安全平台&#xff0c;具有丰富的开放式生态系统。它覆盖了更广阔的的数字化攻击表面和周期&#xff0c;提供自我修复的安全性和网络连接&#xff0c;从而保护设备、数据和应…
阅读更多...
【1】虚拟机安装

【1】虚拟机安装

1.安装VMware WorkStation Pro VMware下载地址&#xff1a; 密钥&#xff1a;YF390-0HF8P-M81RQ-2DXQE-M2UT6 2.新建虚拟机 centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云
阅读更多...
最新文章

Copyright @ 2022~2023