MVVM框架下实现分页功能示例


Posted in Javascript onJune 14, 2018

分页这种组件,几乎每一种框架都有这样的组件,近期我们做了新的项目,因为是在新的分支和新的项目中开发的一期任务,属于什么都没有的状态,几乎所有的效果和业务逻辑都需要重新整理和书写,项目正好完结了,把其中用到的一些小方法分想出来,重在分享思路和逻辑,理清思路和逻辑不论是哪一种框架,都可以轻松搞定

先来看一下效果图:

MVVM框架下实现分页功能示例

分页效果图

场景概述:

当前页面需要加载 10条数据 ,每次点击下一页如果之前没有请求过接口需要请求数据,如果在一次页面会话中, 请求过的数据不再从新请求,且要保留每一页面的操作结果 (比如在页面中对数据做的一些操作:点击事情等),且不知道一共有多少数据。

思考逻辑拆分

1.页面初次加载出数据的时候,需要对视图层和分页功能做初始化,如果第一次加载的数据不足 10条 ,证明没有后续页面,所以也就不用显示分页功能,如果等于10条则证明有下一页。

MVVM框架下实现分页功能示例

初始化只有1页

2.考虑页面列表显示几个:此处设定为 5个 ,且这个列表要随着点击上一页,下一页而动态更新

MVVM框架下实现分页功能示例

页面变化的列表有5条数据

3.需要一个 currentPage 作为索引来显示当前所在页面的下标,以及依靠索引做操作,同时还要记录一个总的页面数据列表 pageList ,还需要一个可以动态更新的显示列表,就是当前看到的5个列表数据 newPages

3.页面数量随着请求不断增加,需要把这些页面中的视图层显示数据存储起来,用于显示和记录数据 Objectives

4.已经请求过得数据不需要每次都请求,如果在当前的页面列表中移动, 不需要动态更新 页面列表,只需要改变currentPage和对应的当前页面数据

MVVM框架下实现分页功能示例

在当前的列表中移动

5.点击上一页的时候需要对当前5个页面列表更新,不需要从新请求数据因为都已经请求过,还要考虑第四点

6.点击下一页的时候,如果没有请求过,也就是下一页的下标, 大于总的数据长度 的时候需要从新请求数据,请求下来后需要对整个页面列表数据(存储的所有页面数据,所有的页面个数列表,当前要显示的5个列表)做 整体的更新 。如果下一页小于等于总的数据长度,则只需要当前5个页面列表更新,和此页的对应数据,还要考虑第四点情况

DOM结构书写

以上的思路理清楚之后,就可以开始动手写代码了,先来书写DOM结构吧。

MVVM框架下实现分页功能示例

DOM结构

来讲讲这段代码的意思吧,我们用属性currentPage的值来控制当前这些元素的显示与否。用newPages的长度来控制页面动态显示的列表。同时用了2个方法来进行操作,changPage这个方法用来改变当前页面的视图层显示数据,arrowPage 方法用了进行上一页和下一页的操作,方法相同,参数不同。再看一下每一项中都有一个data属性用了存储一个page的值,这个值是用来设置currentPage和显示页面数据用的。

方法实现

现在思路清晰,页面所涉及的方法也理清了,开始来写方法吧!

a.初始定义属性默认值

MVVM框架下实现分页功能示例

定义默认值

b.首次加载页面初始化

MVVM框架下实现分页功能示例

初始化数据

如果首次请求的数据小于10条,则默认的currentPage还是0,也不需要显示分页功能。如果符合条件,则需要初始化currentPage为1,同时需要执行一个构造分页列表的方法buildPageList

MVVM框架下实现分页功能示例

首次要实现的功能

MVVM框架下实现分页功能示例

PageList用来存储所有的页面列表,同时用来更新显示的5个页面,所以需要构造当前的5个页面按钮,所以需要方法currentPages

MVVM框架下实现分页功能示例

如果pageList小于5个时候则newPages与它相同,不需要做其他处理。下面的情况一会再讲

MVVM框架下实现分页功能示例

即这种情况

c.点击上一页和下一页操作

MVVM框架下实现分页功能示例

操作方法

根据arrowDirection的值来判断是进行上一页还是下一页的操作。每次点击的时候先更新currentPage的值(data-属性存储的)

1.下一页的操作

如果当前currenPage在当前的页面列表中,点击下一页只需要更换当前的pageData即可

MVVM框架下实现分页功能示例

当前是4,下一页在列表中

如果下一页不在当前列表中,但是小于pageList的长度,则需要变更当前显示的5个page列表,和更换当前的pageData,这个时候回到之前的currentPages方法中来变更当前的newPages。

如果下一页不在当前列表中,并且大于pageList的长度。则请求新的数据,变更列表

MVVM框架下实现分页功能示例

请求数据变更数据

2.上一页的操作

因为“上一页“数据均属于已经存在的状态,所以不涉及请求,只会设计变更列表和页面数据。开头的思路中已经说明

d.点击类别页面的方法changePage

MVVM框架下实现分页功能示例

变更数据即可

不足之处的思考

方法已经书写完毕了,思考一圈之后肯定能发现有很多不足之处吧,是的的确存在一些不足之处。

1.不应该靠currentPage这个属性来控制这么多的DOM元素的显示

2.因为是一次一次的请求数据,不能知道一共有多少数据和记录尾页,只能开最后一次请求时发现没有数据,给出提示,最好的方式应该是在请求最后一次之前能知道下一次没有数据。

3.有一些地方用了固定的数字来做处理,这样日后如果产品要改成显示10个页的列表呢?就得挨个改数字,所以最好用一个熟悉值来控制

对!!!没有给出完整的实例和代码。是的,写出来分享思路和基本方法,目的就是希望看到的人能和我交流思路和方法,给出更好的建议,而不是用来让别人复制粘贴的,这样毫无意义。

思考与总结

到这里所有的思路和方法都已经结合的讲解完毕,基本的代码也都分析全面,基于上面的方法和思想,来写一个适合你们项目框架的分页功能吧,最好能把它封装成一个组件,但是如果由于接口给的数据方式不同或者需求不同,功能实现起来可能会大相径庭,但是基本的思路和方法可以学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
React 组件间的通信示例
Jun 14 #Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 #Javascript
详解React中setState回调函数
Jun 14 #Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 #Javascript
Vue.js添加组件操作示例
Jun 13 #Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python datetime包函数简单介绍
2019/08/28 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python实现扫雷小游戏
2020/04/24 Python
用python绘制樱花树
2020/10/09 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
服装促销活动方案
2014/02/23 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
万能检讨书2000字
2014/10/17 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
python实战之用emoji表情生成文字
2021/05/08 Python