什么是Pagination分页组件？

在 B 端的 web 开发中，分页组件或者叫分页器，是较为常用的控件之一，通常配合表格或列表，实现数据量大的情况下，分页拆解数据的功能。

1.scrollTo和滚动视觉差

HTML DOM里面定义了scrollTo方法，用法：scrollTo(xpos,ypos)，把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动，似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件，其中一个就能够提供平滑滚动的功能

插件叫做jquery.scrollTo.js，当然前提是首先包含jquery的库。而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。就像下面这样：

 $(function(){   $(".nav_pro").click(function(){   $.scrollTo('#pro',500);   });   $(".nav_news").click(function(){   $.scrollTo('#news',800);   });   $(".nav_ser").click(function(){   $.scrollTo('#ser',1000);   });   $(".nav_con").click(function(){   $.scrollTo('#con',1200);   });   $(".nav_job").click(function(){   $.scrollTo('#job',1500);   });   });  

scrollTo的两个参数一个定义要滚动的元素对象，另一个是滚动所持续的时间，以毫秒计算。

平滑滚动只是这个插件可以实现的一个最基本的方法，可以考虑在这基础上继续去做其他的应用，比如展示文档，模拟PPT效果等等。

2.vue3使用vue-scrollto

安装vue-scrollto

npm install --save vue-scrollto

然后在main.js引入

const VueScrollTo = require('vue-scrollto');

app.use(VueScrollTo)

最后在对应页面使用即可

 <div class="flexca broadside_item" v-scroll-to="'#element'"><img src="@/assets/img/icon_41.png" alt="" /><img class="msg" src="@/assets/img/icon_42.png" alt="" v-if="false" /></div>

v-scroll-to后面为点击需要跳转到页面元素的位置；

'#element'可随意命名，元素的class名或id名

3.vue分页组件--封装：方法一（常用）

为什么封装？

分页功能使用场景较多，故考虑封装为全局组件
自己封装成本较低，需要什么功能就添加什么功能
相对使用现成组件库，自己封装代码体积可控

分页组件采用的element组件里的封装一下即可全局使用，方便快捷

采用的是element组件的扥也组件，需安装element依赖，具体如何安装就不多说了。

一、在utils新建scroll-to.js

scroll-to.js内容：

Math.easeInOutQuad = function(t, b, c, d) {t /= d / 2if (t < 1) {return c / 2 * t * t + b}t--return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animating http://goo.gl/sx5stsvar requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }})()/*** Because it's so fucking difficult to detect the scrolling element, just move them all* @param {number} amount*/function move(amount) {document.documentElement.scrollTop = amountdocument.body.parentNode.scrollTop = amountdocument.body.scrollTop = amount}function position() {return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop}/*** @param {number} to* @param {number} duration* @param {Function} callback*/export function scrollTo(to, duration, callback) {const start = position()const change = to - startconst increment = 20let currentTime = 0duration = (typeof (duration) === 'undefined') ? 500 : durationvar animateScroll = function() {// increment the timecurrentTime += increment// find the value with the quadratic in-out easing functionvar val = Math.easeInOutQuad(currentTime, start, change, duration)// move the document.bodymove(val)// do the animation unless its overif (currentTime < duration) {requestAnimFrame(animateScroll)} else {if (callback && typeof (callback) === 'function') {// the animation is done so lets callbackcallback()}}}animateScroll()}

二、在components新建Pagination 新建index.vue文件

index.vue内容：

<template><div : class="pagination-container"><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes="pageSizes":pager-count="pagerCount":total="total"v-bind="$attrs"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></template><script>import { scrollTo } from '../../utils/scroll-to'export default {name: 'Pagination',props: {total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [5,10, 20, 30, 50]}},// 移动端页码按钮的数量端默认值5pagerCount: {type: Number,default: document.body.clientWidth < 992 ? 5 : 7},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}},data() {return {};},computed: {currentPage: {get() {return this.page},set(val) {this.$emit('update:page', val)}},pageSize: {get() {return this.limit},set(val) {this.$emit('update:limit', val)}}},methods: {handleSizeChange(val) {if (this.currentPage * val > this.total) {this.currentPage = 1}this.$emit('pagination', { page: this.currentPage, limit: val })if (this.autoScroll) {scrollTo(0, 800)}},handleCurrentChange(val) {this.$emit('pagination', { page: val, limit: this.pageSize })if (this.autoScroll) {scrollTo(0, 800)}}}}</script><style scoped>.pagination-container {/* background: #fff; *//* padding: 32px 16px; */height: 50px;margin-top:30px;/* position: fixed; */right: 90px;bottom: 20px;}.pagination-container.hidden {/* display: none; */}</style>

三、在main.js引入分组组件 ，并且挂在全局

import Pagination from "./components/Pagination";
Vue.component('Pagination', Pagination)

四、需要用到的页面，使用关在全局的方法名即可使用

 <paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getSocialNumberList"/>

复制粘贴 即可正常使用样式问题调一下即可，@pagination为获取列表的方法，在改变条数或者页数的时候触达

4.vue分页组件--封装：方法二（了解）

方法二与方法一的区别：方法一是全局引入，方法二是组件部分引入，即在使用的地方引入；

另一个区别在方法二的第5点，在方法一中也是可以用的。

一、分页的原理：

1.1 分页的原理

通过element-ui 的内置组件pagination实现分页，任何分页都有以下五个部分组成：

• 记录的总条数

• 每页显示的记录条数

• 总页数

• 当前是第几页

• 当前页的所有记录

1.2 真假分页

pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。

真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据

假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口

二、后端-PageHelper的使用：

1、首先要在pom.xml中添加pageHelper的依赖

<!--分页插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.10</version></dependency>

2、在映射文件中书写“SQL查询”语句；注意：语句结束不要用“；”

<select id="QueryProductsById" resultMap="ProductsMap">SELECT<include refid="products_cloumn_list"/>FROM products WHERE id = #{Id}</select>

3、书写Controller类，注意：调用PageHelper的startPage方法一定要在调用接口中方法前。

@RequestMapping("/PageInfo")public PageInfo<Products> pageInfo(int pageNum, int pageSize) {PageHelper.startPage(pageNum, pageSize);List<Products> list = productsDaoService.QueryProducts();PageInfo<Products> pageInfo = new PageInfo<Products>(list);return pageInfo;}

4、启动tomcat服务器，使用Apipost对接口进行测试，如果接口没有问题的话，就会在“实时响应”中获取到返回值信息。

三、前端-Pagination的使用：

（使用pagination之前，需要会element-UI有初步的了解），因为使用pagination就是一个从vue-element-admin上“搬运”代码的过程。具体可以在element集成上搜索“pagination”进行查看

1、添加<template>标签的内容到需要分页的页面中 （前1、2、3步骤与方法一相同）

 <pagination:total="total":page.sync="listQuery.page":limit.sync="listQuery.limit"@pagination="getList" />

2、根据element集成中，在<script>中导入Pagination组件

import Pagination from '@/components/Pagination'

pagination组件中index.vue的内容如下:

<template><div :class="{'hidden':hidden}" class="pagination-container"><el-pagination:background="background"//背景色  true 为有背景色，false为无背景色:current-page.sync="currentPage"   //当前页:page-size.sync="pageSize" //页面的大小:layout="layout"   :page-sizes="pageSizes":total="total" //总页数v-bind="$attrs"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script>
import { scrollTo } from '@/utils/scroll-to'export default {name: 'Pagination',props: {total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}},computed: {currentPage: {get() {return this.page},set(val) {this.$emit('update:page', val)}},pageSize: {get() {return this.limit},set(val) {this.$emit('update:limit', val)}}},methods: {handleSizeChange(val) {this.$emit('pagination', { page: this.currentPage, limit: val })if (this.autoScroll) {scrollTo(0, 800)}},handleCurrentChange(val) {this.$emit('pagination', { page: val, limit: this.pageSize })if (this.autoScroll) {scrollTo(0, 800)}}}
}
</script><style scoped>
.pagination-container {background: #fff;padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>

同方法一 一样，可以进行适当的修改，或者如果不想要某些功能，删除对应的部分即可

3、注册本地组件，并且因为在添加<template>标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现

export default {components: { Pagination },data() {return {list: [{//查询出来的商品集合}],total: 0,listQuery: {page: 1,limit: 20}}},methods: {getList() {// 获取数据}}
}

4、实现 getList() 方法，发送axios请求获取后端传递的数据，分别将返回的总条数和数据信息分贝赋给本地的total、list集合

  getList() {// 获取数据var vm = this;this.axios({method: 'get',url: 'http://localhost:8080/ssm-template/products/PageInfo?pageNum='+vm.listQuery.page+'&pageSize='+vm.listQuery.limit}).then(function (response) {vm.total = response.data.total;vm.list = response.data.list;})},

5、使用 created()方法，让页面加载时候调用 getList()方法，实现分页即可 ：

 created() {this.getList()},

效果图如下：

5.实现思路：如何实现分页器组件

思路：基于连续页码进行判断

• 需要添加分页器的组件（Search组件）中

           <!-- 分页器 --><Pagination:pageNo="searchParams.pageNo":pageSize="searchParams.pageSize":total="total":continues="5"@getPageNo="getPageNo"/>

1）在分页器组件上传递【当前页码pageNo】、【每页展示的数据pageSize】、【总的数据total】、【连续的页码（重要）】，定义一个【自定义事件getPageNo】把用户点击的【当前页码pageNo】传递回来，并进行数据请求

2）methods中定义函数接受分页器传回来的【当前页pageNo】

1）分页器，分成三部分 ------【如下图】

• 分页器组件（Pagination）中

1）通过props取得 Search组件传递的参数

     props: ["pageNo", "pageSize", "total", "continues"],

2）在分页器组件计算属性computed中计算总共多少页/最后一页 - this.total / this.pageSize

【记得向上取整Math.ceil()，例：当总的数据total=30，每页的数据pageSize=3，那么10页刚刚好展示完毕，如果每页的数据pageSize=4，有7页展示4条数据，还有2条需要下一页展示，所以进行取整，Math.ceil(30/4)=8】

3）在分页器组件计算属性computed中计算连续页码【至少5页】的起始数字start、结束数字end【当前页pageNo在连续页码中】

• 情况判断一：连续的页码 > 总的页数 【start=1，end=总的页数】

• 情况判断二：连续的页码 < 总的页数 【计算 start = pageNo - parseInt(continues / 2)、end = pageNo + parseInt(continues / 2);】

• 分情况一：start数字出现0 | 负数 【continues=5，pageNo=1、2的时候】

• 分情况二：end数字大于总页码 【continues=5，totalPage=30，pageNo=29、30的时候】

• 记得：最后把 start、end返回

• 上下一页 、第一页、最后一页的判断

• 上一页：如果当前页pageNo=1，就不显示上一页按钮，绑定点击事件，点击触发getPageNo自定义事件，把当前页pageNo-1当参数传递回search组件，请求上一页的数据

• 第一页：如果连续页码的起始数字start>1，就显示前面定义好的第一页；小于的话，显示连续页码中的第一页按钮。点击事件同上，由于可能处理选中状态，所以绑定一个类【已经在css中定义好的】，添加选中颜色，当然需要判断是否是选中的页

• 省略...小点：当连续页码的start=3时，显示，也就表示，他们之间还有一页

• 连续页码：通过v-for遍历数字，遍历连续页码中end，并判断其中的元素page>start，才显示【因为传过来的连续页码为5，所以在分页器中连续页码出现最大的就是end-start=5，去掉start之前的页码，才能使连续页码为5】，其他同上

• 省略...小点 | 最后一页 | 下一页：计算同上【totalPage是上面已经算完的总页数|最后一页】

• 静态组件

<template><div class="pagination"><button>1</button><button>上一页</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 {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>

6.el-pagination实现分页功能

如果只放el-pagination组件，只是一个静态的分页展示，还需要绑定数据列表，达到动态分页功能。

静态展示如下

其中最主要的几行代码如图：

对于currentPage、pageSize都要在数据中定义一下，如图

对于handleSizeChange、handleCurrentChange都要实现一下该函数

接下来是最最关键的一步，需要绑定数据加载

对于需要动态加载的组件，进行绑定，比如说绑定到el-table或者el-card中，我的数据储存在carddata中，.slice就是用来分割数据的，根据当前页面的大小以及页面定位进行数据的展示。

前后端分页：

需要注意的是当我们使用后端分页时，要注意前端就不能进行分页了，前端就只负责请求，后台已经把页分好了，不然你的页面就只会显示第一页的数据，其他页都是显示“暂无数据”；前端分页相对来说不会这么麻烦，但还是要多注意。

后端分页：

就是数据在后台已经分好页了，前端只需要用请求去获取数据即可，后端分页的好处是只会把当前页的数据给拿下来，网页加载的速度会很快，但是不足就是每跳转一次，前端都要向后台发送一次请求。

前端分页：

就是用请求从后台把所有的数据拿下来，然后进行分页，如果当数据足够大时，网页就会加载的很慢，唯一的好处就是只需要向后台请求一次就可以了。

参考链接：

https://blog.csdn.net/weixin_69318049/article/details/127072290

https://blog.csdn.net/weixin_49931650/article/details/127828464?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-127828464-blog-127072290.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.3&utm_relevant_index=7