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实现unicode和字符的互相转换
Jul 18 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
jquery插件实现代码雨特效
Apr 24 jQuery
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
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python决策树分类算法学习
2017/12/22 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
如何提高python 中for循环的效率
2020/04/15 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
解决方案设计综合面试题
2015/08/31 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
八一慰问活动方案
2014/02/07 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python