快好知 kuaihz

Axure教程:数据分页显示

上一个教程中,我们讲到了中继器。今天呢,我们继续讲跟中继器有关的。

中继器可以显示数据列表,但是当数据列表数据条数较多,如上百上千上万的时候,一个页面显示可能会过于冗长。在这种情况下,通常的做法就是分页显示,每页显示固定条数的数据,可以进行上页下页进行查看数据,当然也可以指定页码直接跳转。

我们先来个直观的瞅瞅:

下面呢,我就带大家一起来看一下Axure中如何实现这种效果。

话不多说,还是按照我们以往的套路来讲解。

下文将从3个方面来展开。

1. 需求分析

首先先来看一下这个具体的需求是什么?

需求比较简单:数据列表数据过多时,需要分页展示,并且可以上下页进行查看,还可以指定页码跳转至指定页面。

从上面的描述,我们看到关键词“分页显示”。其实这里用到的就是是中继器中分页功能。

2. Axure关键点分析

2.1 中继器,设置数据列表

中继器的设置上一章已经讲过了,不在赘述。这里着重讲一下序号字段的逻辑,这里用到的函数为[[(Item.Repeater.pageIndex-1)*12+Item.index]]。

这个案例里,每页设置为显示12条数据。函数Item.Repeater.pageIndex是用来标识中继器当前显示的页数,函数Item.index是用来标识当前页面的第几条数据

解释之后,相信小伙伴们都能理解上面公式的含义了。若理解不了,再仔细琢磨琢磨  :)

2.2 设置全局变量CurrentPage

默认值为1,用来记录当前所处的页面。

2.3 上一页和下一页跳转

这个实际上运用的是中继器的“设置当前显示页面”,上一页为Previous,下一页为Next。

2.4 跳转指定页面

设置页码,点击对应页码后跳转至响应的页面。运用的是实际上还是中继器的“设置当前显示页面”。

3. 效果展示

最后,我们来看一下最终效果,网址为:https://bm3rdb.axshare.com

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程:数据分页显示  教程  教程词条  数据  数据词条  显示  显示词条  Axure  Axure词条  
原型

 Axure教程 | 制作一个商品...

本期给大家带来的是点击购买按钮后,“商品飞入购物车的动效”。一、照例先上gif二、制作方式我们准备三个需要用到的元素,分别为右侧的购物车(包括鼠标移入的样式),...(展开)

原型

 详解APP端哔哩哔哩所有的导航类...

由于哔哩哔哩的用户性格从整体上说更偏向于活泼,所以B站在具体的细节上的设计也考虑到了用户的调性,并不是一沉不变的。单从导航这一种设计上看,就出现了多达8种设计方...(展开)