Axure教程：数据分页显示
source link: http://www.woshipm.com/rp/3097176.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
上一个教程中，我们讲到了中继器。今天呢，我们继续讲跟中继器有关的。
中继器可以显示数据列表，但是当数据列表数据条数较多，如上百上千上万的时候，一个页面显示可能会过于冗长。在这种情况下，通常的做法就是分页显示，每页显示固定条数的数据，可以进行上页下页进行查看数据，当然也可以指定页码直接跳转。
我们先来个直观的瞅瞅：
下面呢，我就带大家一起来看一下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
本文由 @翠baby 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK