自定义分页器

前端必须要掌握的分页器，轮播图，与日历   手写，掌握原理   

1:分页功能实现

 为什么很多项目采用分页功能：比如电商平台有很多数据。一次加载出来会卡住

 采用分页功能

Element Ul是有相应的分页组件，使用起来超级简单，但是咱们前台项目目前不用【掌握自定义分页器的功能】

2：分页器需要哪些数据（条件）？

需要知道当前是第几页：pagNo字段代表当前页数

需要知道每一页需要展示多少条数据：pageSizs字段进代表

需要知道整个分页器一共有多少条数据：total字段进行代表---【获取另外一条信息：一共多少页】

需要知道分页器连续的页码个数：一般是5或者7【奇数】对称

举列子：每一页10条数据 一共91条数据 【一共是十一页】

总结：对于分页器而言：自定义前提需要知道四个前提条件。

pageNo:当前第几页

pageSizs：代表每一页展示多少条数据

total:代表整个分页一共要展示多少条数据

continues:代表分页连续页码个数

—————————------以上是分析——————————————— 

3.自定义分页器，在开发的时候先自己传递假的数据进行调试，调试成功以后在用服务器数据。 

因为我这里是在vue中并且是父给子传所以用poros 

在子组件中接收一下

4...接收数据一眼就能做的事【总条数】

然后计算出有多少页

 

 接下来计算出起始数字与结束数字

5.分页器动态展示   分为上中下【先来中间部分】

注意v-for是可以遍历：数组|数字|字符串|对象   平时只用数组不要认为只能数组

注意上图是静态时候的结构

 然后用v-for来遍历 ，用v-if来限制他  v-if虽然有提示，但是是没有报错的 也可以用v-show替换

然后

 

 然后把父组件的值改为动态的