分页这种组件，几乎每一种框架都有这样的组件，近期我们做了新的项目，因为是在新的分支和新的项目中开发的一期任务，属于什么都没有的状态，几乎所有的效果和业务逻辑都需要重新整理和书写，项目正好完结了，把其中用到的一些小方法分想出来，重在分享思路和逻辑，理清思路和逻辑不论是哪一种框架，都可以轻松搞定
先来看一下效果图：
分页效果图
场景概述：
当前页面需要加载 10条数据 ，每次点击下一页如果之前没有请求过接口需要请求数据，如果在一次页面会话中， 请求过的数据不再从新请求，且要保留每一页面的操作结果 （比如在页面中对数据做的一些操作：点击事情等），且不知道一共有多少数据。
思考逻辑拆分
1.页面初次加载出数据的时候，需要对视图层和分页功能做初始化，如果第一次加载的数据不足 10条 ，证明没有后续页面，所以也就不用显示分页功能，如果等于10条则证明有下一页。
初始化只有1页
2.考虑页面列表显示几个：此处设定为 5个 ，且这个列表要随着点击上一页，下一页而动态更新
页面变化的列表有5条数据
3.需要一个 currentPage 作为索引来显示当前所在页面的下标，以及依靠索引做操作，同时还要记录一个总的页面数据列表 pageList ，还需要一个可以动态更新的显示列表，就是当前看到的5个列表数据 newPages
3.页面数量随着请求不断增加，需要把这些页面中的视图层显示数据存储起来，用于显示和记录数据 Objectives
4.已经请求过得数据不需要每次都请求，如果在当前的页面列表中移动， 不需要动态更新 页面列表，只需要改变currentPage和对应的当前页面数据
在当前的列表中移动
5.点击上一页的时候需要对当前5个页面列表更新，不需要从新请求数据因为都已经请求过，还要考虑第四点
6.点击下一页的时候，如果没有请求过，也就是下一页的下标， 大于总的数据长度 的时候需要从新请求数据，请求下来后需要对整个页面列表数据（存储的所有页面数据，所有的页面个数列表，当前要显示的5个列表）做 整体的更新 。如果下一页小于等于总的数据长度，则只需要当前5个页面列表更新，和此页的对应数据，还要考虑第四点情况
DOM结构书写
以上的思路理清楚之后，就可以开始动手写代码了，先来书写DOM结构吧。
DOM结构
来讲讲这段代码的意思吧，我们用属性currentPage的值来控制当前这些元素的显示与否。用newPages的长度来控制页面动态显示的列表。同时用了2个方法来进行操作，changPage这个方法用来改变当前页面的视图层显示数据，arrowPage 方法用了进行上一页和下一页的操作，方法相同，参数不同。再看一下每一项中都有一个data属性用了存储一个page的值，这个值是用来设置currentPage和显示页面数据用的。
方法实现
现在思路清晰，页面所涉及的方法也理清了，开始来写方法吧！
a.初始定义属性默认值
定义默认值
b.首次加载页面初始化
初始化数据
如果首次请求的数据小于10条，则默认的currentPage还是0，也不需要显示分页功能。如果符合条件，则需要初始化currentPage为1，同时需要执行一个构造分页列表的方法buildPageList
首次要实现的功能
PageList用来存储所有的页面列表，同时用来更新显示的5个页面，所以需要构造当前的5个页面按钮，所以需要方法currentPages
如果pageList小于5个时候则newPages与它相同，不需要做其他处理。下面的情况一会再讲
即这种情况
c.点击上一页和下一页操作
操作方法
根据arrowDirection的值来判断是进行上一页还是下一页的操作。每次点击的时候先更新currentPage的值（data-属性存储的）
1.下一页的操作
如果当前currenPage在当前的页面列表中，点击下一页只需要更换当前的pageData即可
当前是4，下一页在列表中