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