手写分页器组件

已于 2022-02-14 09:45:04 修改
阅读量889 收藏 5
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-02-13 22:03:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42356513/article/details/122915019
版权

主题

数据量过大的时候,前端分页是避免不了的事情,记录一次手写分页器组件(估计我这辈子只会手写这一次)。

首先把静态分页器弄出来。再做js逻辑设计。

<template>
  <div class="pagination">
    <button>上一页</button>
    <button>1</button>
    <button>···</button>

    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>

    <button>···</button>
    <button>9</button>
    <button>下一页</button>

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

<script>
export default {
  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;
    }
  }
}
</style>

视图:

在这里插入图片描述

参数设计

先要搞清楚几件事情,前端做分页我们需要什么东西？这里假设我们做的是一个商城项目。

  • 1.total:商品的总数量
  • 2.pageSize: 每页需要显示的数量
  • 3.curPage:当前页

然后我设计的分页器,中间那一坨,默认显示5个,也就是当前页前后还带有2个页码

搞清楚我们要的东西之后,我们在父组件传入一些写死的参数测试。

父组件使用

 <Pagination :total="30" :curPage="6" :pageSize="10"></Pagination>

子组件接受

  props: {
    // 商品总数量
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    curPage: {
      type: Number,
      default: 1
    },
    // 每页大小
    pageSize: {
      type: Number,
      default: 10
    }
  }

这时候问题就来了,有多少页呢？我们先来推算一下,如果total为90,每页的商品数量有10个,那么页码就有9个,但是如果total是91呢？那么页码就应该有10个,很明显,是总数除以每页数量并向上取了整。所以我们就可以在分页器组件来一个pageTotalNum,由于它是依赖于total和pageSize的,所以我们这里可以把它放到计算属性里面。

  computed: {
      // 页码总数
    pageTotalNum () {
      return Math.ceil(this.total / this.pageSize)
    }
  }

写到这里, 我们来测试一下

父组件传参

 <Pagination :total="300" :curPage="6" :pageSize="10"></Pagination>

上组件代码

<template>
  <div class="pagination">
    <button>上一页</button>
    <button>1</button>
    <button>···</button>

    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>

    <button>···</button>
    <button>{{ pageTotalNum }}</button>
    <button>下一页</button>

    <span>共{{ total }}条</span>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 商品总数量
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    curPage: {
      type: Number,
      default: 1
    },
    // 每页大小
    pageSize: {
      type: Number,
      default: 10
    }
  },
  computed: {
    pageTotalNum () {
      return Math.ceil(this.total / this.pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  span,
  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;
    }
  }
  span {
    cursor: none !important;
    background-color: unset !important;
  }
}
</style>

视图:

在这里插入图片描述

成功了,实测total为301也是没问题的,这里我就不截图了。

处理边界情况

看似这个分页器组件好像设计的挺好的,从视图上面没看出什么问题,但是还有很多边界情况需要处理。

1.当前页码问题

首先要搞清楚一件事,如果当前页码是5,那么5的前后是要有2个连续的页码的,也就是中间一坨要是3,4,5,6,7,但是问题来了,如果当前页码是2呢,总不可能是0,1,2,3,4,5吧,所以当前页码是有相关限制的,也就是说当当前页码小于3时,就要特殊处理了,因为当前页码等于3,刚好是1,2,3,4,5。

1.1 中间那一坨的起始参数

这时候我们定义一个start参数,用来表示当前页码的前2个页码,也就是说,当前页码是5,那么start就是3,当前页码是4,start就是就是2

这时候就要处理相关逻辑了

    // 当前页码的前2位
    start () {
      // 当前页码小于3,左右不对称,start直接为1
      if (this.curPage < 3) {
        return 1
      } else {
        return this.curPage - 2
      }
    }
1.2 中间那一坨的结束参数

这时候我们定义一个end参数,用来表示当前页码的后2个页码,也就是说,当前页码是5,那么end就是7,当前页码是4,end就是就是6

这时候就要处理相关逻辑了。这个地方略微麻烦一点,比如总页码数现在是8,当前页码是7,end肯定不能为9是为8,当前页码为6,end就是正常的,所以推出end小于总页码数-2才能正常显示。

    end () {
      // 当前页码不能大于总页码-2
      if (this.curPage > this.pageTotalNum - 2) {
        return this.pageTotalNum
      } else {
        return this.curPage + 2
      }
    }

循环遍历中间那一坨按钮

我们现在有中间那一坨按钮的start和end参数,就可以把中间那一坨按钮用v-for循环遍历出来了

      <button v-for="(item, index) in end" :key="index">
        {{ item }}
      </button>

视图:

在这里插入图片描述

很明显,遍历是遍历出来了,但是很明显是有问题的,我们中间那一坨按钮明显多了,期望的应该是4,5,6,7,8，----1,2,3应该都是不显示的,这时候就要用到v-if了,判断的逻辑就是我只让start小于等于item的显示,就可以了。但是这里要注意一点,v-if和v-for是不能一起使用的,怎么解决请参考我的这篇文章,

上html代码

   <template v-for="(item, index) in end">
      <button v-if="start <= item" :key="index">
        {{ item }}
      </button>
    </template>

上视图:

在这里插入图片描述

这时候看起来就想当正常了。

边界情况的再处理

1.左边的边界情况

但是现在又来了,最前面那个1跟…肯定不能一直显示,打个比方如果start是1呢？看视图:

在这里插入图片描述

先来考虑左侧…的显示与隐藏,我们想想,当start为3时,1跟3中间有个2,这时候…就应该显示了,当statr为2时,…就应该隐藏了所以上…的显示与隐藏逻辑

  <button v-show="start > 2">···</button>

视图:

在这里插入图片描述

嗯,很符合我们的预期。

在上1的判断逻辑

<button v-show="start > 1">1</button>

视图:

在这里插入图片描述

也是很符合我们的预期的。

2.右边的边界情况处理

我们先来考虑右边的…显示与隐藏,当end等于30的时候,没有…,当end等于29的时候有…

这时候判断逻辑就出来了

  <button v-show="end < pageTotalNum - 1">···</button>

视图也是符合预期的,注意我这里把当前页码修改成了28

在这里插入图片描述

再来控制31的显示与隐藏,想一下,如果end等于31那么31肯定得隐藏了

    <button v-show="end !== pageTotalNum">{{ pageTotalNum }}</button>

注意这里我把当前页码修改成了29让end与总页码数相等

视图也是符合预期的:

在这里插入图片描述

3.上一页下一页按钮的禁用

设想一下:

  • 当前页在第一页,上一页肯定不能点
  • 当前页为最后一页,下一页肯定也不能点

这个地方就比较简单了上判断代码

    <button :disabled="curPage === 1">上一页</button>
	<button :disabled="curPage === pageTotalNum">下一页</button>

到这里,边界情况就结束了。我们开始设计交互逻辑

点击事件的绑定

按钮的事件绑定

点击哪个页码我们在父组件修改页码的值,这个地方我的思路是用子组件发射事件父组件处理页码修改,因为当前页码是从父组件传到子组件的,那么肯定涉及到子组件修改父组件的值了,所以我采取如下的方式,上父组件代码

          <Pagination
            :total="301"
            :cur-page="curPage"
            :page-size="10"
            @current-page=“currentPage”
          ></Pagination>

curPage的值初始值肯定是1，上中间那一坨按钮html代码

    <template v-for="(item, index) in end">
      <button
        v-if="start <= item"
        :key="index"
        @click="changeCurrentPage(item)"
      >
        {{ item }}
      </button>
    </template>

事件处理:

  methods: {
    changeCurrentPage (curPage) {
      this.$emit('current-page', curPage)
    }
  },

经过实际测试,是没问题的。

其他的还有上一页,下一页,第一页,最后一页的按钮逻辑,直接给出模板区域代码

<template>
  <div class="pagination">
    <button :disabled="curPage === 1" @click="changeCurrentPage(curPage - 1)">
      上一页
    </button>
    <button v-show="start > 1" @click="changeCurrentPage(1)">1</button>
    <button v-show="start > 2">···</button>

    <template v-for="(item, index) in end">
      <button
        v-if="start <= item"
        :key="index"
        @click="changeCurrentPage(item)"
      >
        {{ item }}
      </button>
    </template>

    <button v-show="end < pageTotalNum - 1">···</button>
    <button
      v-show="end !== pageTotalNum"
      @click="changeCurrentPage(pageTotalNum)"
    >
      {{ pageTotalNum }}
    </button>
    <button
      :disabled="curPage === pageTotalNum"
      @click="changeCurrentPage(curPage + 1)"
    >
      下一页
    </button>

    <span>共{{ total }}条</span>
  </div>
</template>

激活样式绑定

<template v-for="(item, index) in end">
      <button
        :class="{ active: curPage === index + 1 }"
        v-if="start <= item"
        :key="index"
        @click="changeCurrentPage(item)"
      >
        {{ item }}
      </button>
    </template>

判断一下当前页码与index+1是否相等,注意,页码是从1开始的index是从0开始的,所以index加1

样式我就不给了,各位自己定制。

代码优化

我们考虑一下,用户如果点击当前页,其实没必要在发网络请求调接口渲染了,所以我们可以在点击事件里面优化一下

    changeCurrentPage (curPage) {
        // 用户如果点击的是当前页码,就不要发请求了
      if (this.curPage === curPage) {
        return ''
      }
      this.$emit('current-page', curPage)
    }

完整组件代码

<template>
  <div class="pagination">
    <button :disabled="curPage === 1" @click="changeCurrentPage(curPage - 1)">
      上一页
    </button>
    <button v-show="start > 1" @click="changeCurrentPage(1)">1</button>
    <button v-show="start > 2" style="cursor: unset">···</button>

    <template v-for="(item, index) in end">
      <button
        :class="{ active: curPage === index + 1 }"
        v-if="start <= item"
        :key="index"
        @click="changeCurrentPage(item)"
      >
        {{ item }}
      </button>
    </template>

    <button v-show="end < pageTotalNum - 1" style="cursor: unset">···</button>
    <button
      v-show="end !== pageTotalNum"
      @click="changeCurrentPage(pageTotalNum)"
    >
      {{ pageTotalNum }}
    </button>
    <button
      :disabled="curPage === pageTotalNum"
      @click="changeCurrentPage(curPage + 1)"
    >
      下一页
    </button>

    <span>共{{ total }}条</span>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 商品总数量
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    curPage: {
      type: Number,
      default: 1
    },
    // 每页大小
    pageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    changeCurrentPage (curPage) {
      if (this.curPage === curPage) {
        return ''
      }
      this.$emit('current-page', curPage)
    }
  },
  computed: {
    // 总页码数
    pageTotalNum () {
      return Math.ceil(this.total / this.pageSize)
    },
    // 当前页码的前2位
    start () {
      // 当前页码小于3,左右不对称,start直接为1
      if (this.curPage < 3) {
        return 1
      } else {
        return this.curPage - 2
      }
    },
    // 当前页码的后2位
    end () {
      // 当前页码不能大于总页码-2
      if (this.curPage > this.pageTotalNum - 2) {
        return this.pageTotalNum
      } else {
        return this.curPage + 2
      }
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  span,
  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;
    }
  }

  span {
    cursor: none !important;
    background-color: unset !important;
  }
  .active {
    background-color: #409eff;
    color: #fff;
    cursor: unset;
  }
}
</style>

总结

这个分页组件可以传3个参数

  • 1.total:商品的总数量

  • 2.pageSize: 每页需要显示的数量

  • 3.curPage:当前页

    页码改变时这个组件能发射一个事件给父组件,事件名: current-page，回调参数,当前点击的页码。

    若有任何问题,欢迎指出~~~~

博客

欢迎访问我的博客www.smartxy.cc

疯狂的夏铭予
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端实现el-pagination分页组件纯前端分页使用方法
Lguorong的博客
08-17 6004
又是被后端欺负的一天，做了个公司的老项目，表格分页后端没法做，那就只能前端来完成。这里我介绍两种方法，需要的自提
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
分页手写纯手写
01-10
分页手写纯手写
vue+elementUI组件table实现前端分页(后端接口没有做分页时)
weixin_42125732的博客
05-31 7116
背景：在现在这个盛行前后端分离的现状下，前后端都是各自负责自己的职责，在表格分页这一块，有时候后端未给你做分页，或者忘记给你做分页了，你就可以采用以下的方法自己对表格进行分页 首先效果图如下： 未作分页： 做了分页后： 看完效果图直接上demo: <template> <div id="app"> <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pag
手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
kagol的博客
12-01 1148
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。 官方网站：devui.design Ng组件库：ng-devui（欢迎Star） 引言 “他在正午、黄昏，在一天里的许多时刻去感受它、记录它，结果也就让我们看到了那么多的不同。他描绘它的角度没变，但它的面目却极大地改变了。” 19世纪著名的印象派画家莫奈，喜欢对着同一处景物，分别画出对象在不同时间，不同光线下的色彩变化。 比如不同季节的三株白杨： 比...
手写一个简单的分页器
qq_18824403的博客
03-13 3161
封装分页器 1. 前言 分页器基本上是任何网站必须要有的一个组件，为什么需要分页器，当后台传入了大量的数据，那么在前端拿到数据，如果直接展示很有可能或造成卡顿，同时消耗过多的内存，给用户带来的浏览效果就不好。所以，分页器的使用可以一次性只展示部分数据，用户可以非常方便的跳转不同的页面来访问内容。虽然现在很多的UI库都有这个组件，使用也非常的方便，但是我们也应该要知道，怎么手写一个分页器。 2. 准备 先搭建一个静态的分页器。效果如下图。 <template> <div cl
分段控制器
连锁销售郑秋冬
03-24 652
写在前面 项目中经常用到分段控制器，网上找的几个用着不是太顺手，细读了两份源码，其实也不难，二来各个项目特色不一样，觉得造个轮子还是有些必要的。 沙场点兵 所谓的分段控制器无非是顶部选择器跟下面的视图控制器联动。 那么怎么实现这种联动呢。 顶部的选择器可以用collectionView实现，有一下几点好处 选中某一个通过代理方法可以方便的执行一些操作 把当前选中的item居中动画...
前端手写分页
weixin_47438730的博客
01-06 175
const getTableData = (page = 1, pageSize = 10, totalData = []) => { const { length } = totalData; const tableData = { data: [], page, pageSize, length, }; if (pageSize >= length) { //pageSize大于等于总数据长度，说明只有1页数据或没有数据 tableD
手写分页方法
a984171281的博客
02-11 1331
分页方法 前端传过来的pageSize、currentPage calculatePageCount()是计算分页的方法 public class PageInfo implements Serializable { public static final int DEFAULT_PAGE_SIZE = 20; private int rowCount = 0; //当前页数 private int currentPage = 1; //页面大小 默认20条一页 private int
前端手动分页
ZhuAiQuan的博客
09-02 785
在后台没有做分页的情况下，前端可以自己写好算法并借用elementui之类的ui组件里的Page分页功能手动完成分页； 具体思路是根据后台传回的源数据 处理成二维数组； 1、总数量除以每页数量并向上取整获取总页数；Array(‘总页数’).fill([])获取一个基于总数索引的二维空数组； 2、for循环总页数，每次向二维数组传入数据； 具体代码如下 // 手写分页数据 private sliceArray(arr: any[], size: number = 10) { // ar
一个不错的分页组件，很简单
01-15
分页再也不用自己手写，这个组件很简单，会省去很大一部分时间。。。
vue分页器组件跳转下一页上一页
07-20
使用vue编写的分页器组件，可设置初始页码，支持输入页码跳转
java web手写实现分页功能
08-25
主要为大家详细介绍了java web手写实现分页功能的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Asp.net经典手写分页器
05-18
用的是repeater轻量级控件，最高效的程序
uniapp手写电子签名组件
04-14
uniapp 中微信小程序手写电子签名组件，下载即用，有问题随时联系我哈
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口
kaven
04-13 6707
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口 很久没有更新博客了，主要原因是博主一直在补充知识，发现自己还有很多地方不足，等博主学到一定程度再来相互探讨技术。 主要是看到评论区的小伙伴说分页该怎么实现，博主就花了几个小时去实现一个小例子。 ElementUI的Pagination分页组件： Pagination 大家可以先看一下这个组件实现分页的效果怎么样。 数据库 有数据才能进行展示，为了简单，
简单的前端分页实现
凌晨不睡觉
04-12 160
有些项目业务比较简单，但用到前端分页的地方又比较多，插件的体积比较难控制用起来也麻烦，所以自己写一个简易的。
手写前端分页效果
Hhjian524的博客
05-18 642
需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。 效果图： 当页数是第一页的时候，首页和向前那个按钮处于禁止点击的状态 各个按钮都正常的状态 当页数是第一页的时候，首页和向前那个按钮处于禁止点击的状态 各部分的代码如下： html部分： <!-- 分页 --> <div class="pageBox"> <div class="pageTotal">共<span>88</span>条</div> <
uniapp 全端兼容 - 实现分段器选项卡组件，可高度自定义带过渡动画（修改激活、未激活颜色、背景颜色、是否加粗、高度等等配置）开箱即用组件插件源码，uniapp 兼容H5、小程序、APP 全端兼容
高级前端工程师
02-08 2806
uniapp - 分段器选选项卡组件uniapp动态切换选项卡uni-app选项卡组件选项卡在uniapp中叫分段器uni-app 分段选择器组件uniapp 分段器 uniapp如何实现选项卡功能uniapp实现选项卡uniapp 小程序 APP H5端的选项卡组件源码 uniapp选项卡源码插件示例代码uni-app 选项卡组件uniapp官方选项卡组件uniapp顶部滑动选项卡uni-app选项卡组件uniapp顶部滑动选项卡uniapp tab选项卡简单demon
vue2手写一个样式跟el-pagenation一样的分页器
最新发布
07-04
首先，在你的 Vue 组件中引入分页器组件的样式，例如： ```html .pagination { display: flex; justify-content: center; margin-top: 10px; } .pagination-item { margin: 0 5px; padding: 5px 10px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值