使用ivx实现分页获取数据的经验总结

在实际案例中我们经常需要展示一些数据,而这些数据都是存放在后台的数据库之中的而且可能数量庞大,在前台的界面中一下子全都展示出来肯定是不现实的,另外一次性让后台传输如此多的数据到前台也会有很大的延迟,使用户体验较差。因此,我们就需要采取一种分页的方式来少量多次的获取数据,这样用户每次操作之后都能很快得到反馈,同时前台也不用存放很多数据造成案例卡顿,今天就来说说如何实现这种分页效果。


1.组件结构

Demo中的结构比较简单,页面下放置了一个列作为案例主体,列内添加了一个分页组件,还有一个for容器用于循环创建每页显示的图片,而循环创建的数据来源就是对象数组分页数据。


2.分页组件

分页组件是ivx中的一个拓展组件,主要应用场景就是分页显示数据啦,当然我们也可以使用各个基础功能去做一个自定义样式的分页模块。不过今天就只介绍一下分页组件的属性和用法。


数据总条数和每页数据条数可以算出分页组件一个有多少个分页,demo中这里已经设置了一共10条数据并且每页显示3张图片。显示按钮数量对应的是中间有几个页号按钮。


当显示的是第一页时,首页和上一页的按钮会隐藏,同理,在显示最后一页时下一页和尾页也会隐藏。


如果开启精简模式首页,尾页,上一页和下一页的按钮就都会隐藏掉。


3实现分页获取数据的逻辑

首先是前台初始化的时候,先调用了输出分页数据服务,并且调用的时候传给服务的page参数等于1。而服务中让数据库输出的行数是从(page-1)*3+1到page*3,代入page=1,经过计算即1到3行。



所以,打开案例后直接呈现效果的如下图所示。


这里也说一下这两个动作吧,他们的作用就是在服务返回数据库的输出结果前显示一个这样的加载框,当前台拿到服务的返回结果就让加载框隐藏。如果想让案例更完美这样的小细节也是必不可少的。



然后就是案例运行中我们选择了某一个页面后,依旧是调用输出分页数据服务,并设置page参数等于分页组件的“当前页码”,这个变量是在分页组件的“当前页改变”事件下抛出的。。比如我们点击了页号2,“当前页码”等于2,即服务中page=2,数据库依旧按公式输出(page-1)*3+1到page*3行,代入计算可得是第4到第6行,按照我们对数据库三行算一页的划分这正好是第二页的数据。我们把这三行数据传给前台的分页数据对象数组,for循环容器就按照这三行数据创建出三个图片组件显示出来。



4.动态页号

在这个demo中分页组件已经设置好了一共10条数据,然后每页数据条数为3,则一共会有4个分页,但是在实际案例中数据库中的数据可能会随着案例运行增加或者减少,我们很难预先知道实际的数据总条数是多少。另外,虽然服务中有统计数据库数目的功能,但是数据量庞大的话我们也不可能每一次都去统计数据库的数据总量,这是很耗费时间和设备资源的。所以下面就来说说如何实现动态页号。


当前,列表数据数据库中有16条数据,这里不要看最后一条数据的数据ID是16就判定有16条数据,每条数据ID都是唯一的,你把数据ID为1的数据删除再添加一条新的数据,新的数据的ID会是2,所以实际数目其实小于等于最后一行数据的ID。


在后台再添加一个数据库并给它添加一个字段数据总量,然后在第一行数据的该字段下输入16,点击保存。


在后台添加一个对象数组和数值变量,先将分页数据输出后保存到对象数组中,然后获取到数据库中存放的数据总量,最后一起作为服务的返回参数。


找到前台调用输出分页数据服务的两个地方,在回调里将分页组件的数据总量属性的值设置为服务返回的结果。



最后要保证的就是数据总量数据库中存放的值一直是等于列表数据中的数据总条数的。如果列表数据数据库中的数据条数是变化的,那么就会有提交数据和删除数据的两个服务,。在提交服务中,提交后我们就要将数据总量数据库中的数据总量加1,在删除服务中,删除数据后我们就将其减1,也就是加(-1)。(总之就是所有对列表数据有增删时都要知会数据总量数据库一声儿啦)



总结

分页获取数据实现的难点一个在于动态,这取决于案例中各部分逻辑的计算公式的设计,一个在于对边界的处理,必须考虑到各种情况。这要求我们在制作案例时必须要逻辑缜密,考虑全面,只有开发者把案例使用的全部状况都考虑清楚才能确保用户在使用时不会出现各种“意料之外的状况”,这一直(还将永远?)都是开发者们所努力的方向吧。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容