分页这种组件，几乎每一种框架都有这样的组件，近期我们做了新的项目，因为是在新的分支和新的项目中开发的一期任务，属于什么都没有的状态，几乎所有的效果和业务逻辑都需要重新整理和书写，项目正好完结了，把其中用到的一些小方法分想出来，重在分享思路和逻辑，理清思路和逻辑不论是哪一种框架，都可以轻松搞定
先来看一下效果图：
分页效果图
场景概述：
当前页面需要加载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，下一页在列表中
如果下一页不在当前列表中，但是小于pageList的长度，则需要变更当前显示的5个page列表，和更换当前的pageData，这个时候回到之前的currentPages方法中来变更当前的newPages。
如果下一页不在当前列表中，并且大于pageList的长度。则请求新的数据，变更列表
请求数据变更数据
2.上一页的操作
因为“上一页“数据均属于已经存在的状态，所以不涉及请求，只会设计变更列表和页面数据。开头的思路中已经说明
d.点击类别页面的方法changePage
变更数据即可
不足之处的思考
方法已经书写完毕了，思考一圈之后肯定能发现有很多不足之处吧，是的的确存在一些不足之处。
1.不应该靠currentPage这个属性来控制这么多的DOM元素的显示
2.因为是一次一次的请求数据，不能知道一共有多少数据和记录尾页，只能开最后一次请求时发现没有数据，给出提示，最好的方式应该是在请求最后一次之前能知道下一次没有数据。
3.有一些地方用了固定的数字来做处理，这样日后如果产品要改成显示10个页的列表呢？就得挨个改数字，所以最好用一个熟悉值来控制
对！！！没有给出完整的实例和代码。是的，写出来分享思路和基本方法，目的就是希望看到的人能和我交流思路和方法，给出更好的建议，而不是用来让别人复制粘贴的，这样毫无意义。
思考与总结
到这里所有的思路和方法都已经结合的讲解完毕，基本的代码也都分析全面，基于上面的方法和思想，来写一个适合你们项目框架的分页功能吧，最好能把它封装成一个组件，但是如果由于接口给的数据方式不同或者需求不同，功能实现起来可能会大相径庭，但是基本的思路和方法可以学习。
说明：文章中的图片均处于本人截图和绘制，文字均属原创，转载请注明出处
Cayley 一个不断努力学习的女程序员
网友评论