Axure实现中继器信息获取与分页条

发表于: 2019-01-09 16:14:14
来自 威锋网页版
5164
0
只看楼主
Axure()中继器比较复杂,但是功能也多,今天将给大家分享下关于Axure实现中继器信息获取与分页条的教程。

我来介绍一下,需要做的内容:

1、使用中继器实现表格,设置每页显示数量和交替背景颜色;

2、表格中首列序号自动生成,且不受翻页影响;

3、表格加载时,顶部显示表格相关信息,包括可见项数量、加载项数量、当前页面以及页面总数;

4、点击分页条按钮能够翻到相应页面;

5、点击分页条按钮时,列表信息要跟随发生变化;

6、列表翻页时,对应的翻页按钮文字加粗显示。

接下来,我们就根据上面罗列的实现目标,逐一完成各项功能。

第一步,放入一个中继器,双击打开,先完成中继器的基本操作(纯属套路,此处简述,看图理解)。

1、创建模板

Axure创建模板

2、添加数据

Axure添加数据

3、添加交互

这一步需要特别说明一下。

【每项加载时】添加【设置文本】这个动作时,其他几项照常操作,序号这一项要将“StuIndex”的值设置为“]”。

其中:Item.Repeater.pageIndex是当前项所在中继器的当前页码;item.index是当前项的序号,但是这个序号翻页后会依然从1开始;所以,我们通过页码减1乘以12(每页项目数量)再加上项的序号就能够计算出正确的序号。

Axure添加交互

4、设置样式

这一步也要注意,模板中的所有矩形都要取消填充颜色或者设置不透明为0%,否则,会遮挡中继器添加的背景颜色和交替背景色。

Axure设置样式

经过以上几步设置,我们现在能够看到这样的效果。

Axure效果

第二步,表格上面的X要变成相应的数值。

我们先给显示信息的元件命名为“ListInfo”

页面打开后,这些数值就要呈现出来,所以,在这个元件的【载入时】(在更多事件中)我们添加【设置文本】于“当前元件”的动作,然后点击fx按钮,进行值的设置。

Axure设置本文

在值的设置界面,我们先创建局部变量获取到【元件】“List”,然后通过系统变量调用它的各个属性,添加到信息文本中。

Axure局部变量

通过这一步,在预览时我们就能够看到列表信息了。

第三步,为分页条按钮添加翻页的交互。

翻页的交互很简单,都是通过【鼠标单击时】添加【设置当前显示页面】的动作来实现,区别在于上一页、下一页和尾页是在列表中选择,其它的是指定页码。

1、尾页

Axure显示页面

2、上一页

Axure上一页

3、下一页

Axure下一页

4、首页

Axure首页

5、各个翻页按钮

Axure翻页按钮

各个翻页按钮上的文字即是页码,所以可以通过]获取到当前被点击翻页按钮上的文字填入。这样设置完毕后,可以将交互复制给其他翻页按钮,无需再重复设置。

第四步,点击翻页按钮时,列表信息要跟随发生变化。

我们需要给分页条中每一个按钮【鼠标单击时】都继续添加一个,通过【触发事件】重新触发信息元件“ListInfo”的【载入时】事件。

这里以首页按钮为例。

Axure触发事件

添加完这个动作后,复制给其它翻页按钮,这样,在翻页的同时列表信息也会被重新加载。

第五步,列表翻页时,对应的翻页按钮文字加粗显示。

翻页按钮的文字样式发生变化,我们首先该想到的是需要设置【选中】时的交互样式。

并且,给这些翻页按钮添加相同的选项组名称,以保证只有一个按钮文字变粗。

提示:关于选项组效果,请到《Axure RP 8入门手册》的在线阅读的相关文章中了解。

Axure选中

这些带有页码的翻页按钮命名为“Tag01”~“Tag06”,为什么到6呢?

接下来,我们需要考虑的是什么时候选中。

很显然,每个带有页码的翻页按钮【鼠标单击时】,都应该【选中】当前这个按钮,从而文字变成选中时的粗体。

提示:当然也可以设置其他样式,只是对于我来说粗点就行了。

Axure设置选中

这一个动作也只需要给一个带有页码的翻页按钮设置,然后复制给其它按钮。

另外,还要给首页按钮【鼠标单击时】【选中】“Tag01”的动作;

并且,给尾页按钮添加【鼠标单击时】【选中】“Tag06”的动作。

最后,还有上一页和下一页按钮需要进行处理。

而且,页面刚刚打开时也需要选中一个带有页码的翻页按钮。

那么,我们就在每一个带有页码的翻页按钮【载入时】都添加一个交互。

首先,在条件设置中,我们可以通过局部变量“l”获取中继器“List”这个元件,然后通过“l.pageIndex”获取到当前列表显示页面的页码;如果这个页码【==】“当前元件”的【元件文字】,就执行【选中】“当前元件”的动作。

提示:局部变量“l”的设置,参考第二步中类似的设置;选中当前元件的动作设置,参考上一步中类似的设置。

Axure添加条件

当为每一个带有页码的翻页按钮设置完载入时的交互之后,我们为上一步和下一步按钮添加交互,这个交互是【鼠标单击时】通过【触发事件】重新执行每一个带有页码翻页按钮的【载入时】交互。

以上一页按钮为例。

因为之前添加过【触发事件】这个动作,我们就在这个动作上继续编辑。

Axure触发事件

完成这一步后,点击上一页和下一页按钮时,就能根据中继器当前页面的页面选中对应的页码按钮。

以上内容就是Axure实现中继器信息获取与分页条的教程,更多感兴趣的教程点击文章:Axure解决鼠标单击时与鼠标长按时事件冲突。
本篇文章来自:axurechina.cc/help/skill/1775.html

快来抢沙发!