previous固定搭配(Axure教程:数据分页显示)


previous固定搭配(Axure教程:数据分页显示)

在之前的教程中,我们深入探讨了中继器的应用。今天,我们将继续探讨中继器的分页功能。

中继器是用于展示数据列表的强大工具,但当数据列表包含大量的条目,比如成千上万条时,单一页面展示可能会显得过于冗长。针对这种情况,通常采取的策略是实施分页显示,每一页展示固定数量的数据条目,用户可以点击上一页或下一页查看数据,同时也可以直接跳转到指定的页码。

接下来,让我们一起在Axure中实现这种效果。

我们主要从以下三个方面进行详细的讲解:

1. 需求分析

明确具体的需求。需求相对简单:当数据列表中的条目过多时,需要实施分页展示,允许用户上下翻页查看,并可以跳转到指定的页面。这个需求的实现关键在于中继器的分页功能。

2. Axure关键点分析

2.1 中继器及数据列表设置

中继器的设置方法我们在之前的章节已经介绍过,这里我们重点讲解序号字段的逻辑。这里需要使用到的函数为[[(Item.Repeater.pageIndex-1)12+Item.index]]。

在这个例子中,我们每页设置显示12条数据。函数Item.Repeater.pageIndex用于标识中继器当前显示的页数,函数Item.index用于标识当前页面的数据条目序号。

相信在解释之后,大家都能理解上述公式的含义。如果不明白,不妨再仔细琢磨一下。

2.2 设置全局变量CurrentPage

我们设置一个全局变量CurrentPage,默认值为1,用于记录当前所在的页面。

2.3 上一页和下一页跳转

实现上一页和下一页的跳转,实际上是利用中继器的“设置当前显示页面”功能,上一页对应Previous,下一页对应Next。

2.4 跳转至指定页面

用户点击某个页码后,实现跳转至相应的页面。这同样是利用中继器的“设置当前显示页面”功能。

3. 效果展示

让我们来看一下在Axure中实现的分页效果展示。详细的展示网址为:[网址]。

题图来源于Unsplash,遵循CC0协议。


previous固定搭配(Axure教程:数据分页显示)