中继器信息获取与分页条的实现--转载
首先提醒一下,这个很长,有些人可能会受不了!
先来看看要实现的内容。
这是一个学生成绩的表格。
我来介绍一下,需要做的内容:
1、使用中继器实现表格,设置每页显示数量和交替背景颜色;
2、表格中首列序号自动生成,且不受翻页影响;
3、表格加载时,顶部显示表格相关信息,包括可见项数量、加载项数量、当前页面以及页面总数;
4、点击分页条按钮能够翻到相应页面;
5、点击分页条按钮时,列表信息要跟随发生变化;
6、列表翻页时,对应的翻页按钮文字加粗显示。
特别提醒:对中继器不了解的同学,去看《中继器结构与原理详解》,否则,在学习本教程过程中,出现恶心、呕吐、发热以及妊娠反应,本站概不负责!
接下来,我们就根据上面罗列的实现目标,逐一完成各项功能。
第一步,放入一个中继器,双击打开,先完成中继器的基本操作(纯属套路,此处简述,看图理解)。
1、创建模板
2、添加数据
3、添加交互
这一步需要特别说明一下。
【每项加载时】添加【设置文本】这个动作时,其他几项照常操作,序号这一项要将“StuIndex”的值设置为“[[(Item.Repeater.pageIndex-1)*12+Item.index]]”。
其中:Item.Repeater.pageIndex是当前项所在中继器的当前页码;item.index是当前项的序号,但是这个序号翻页后会依然从1开始;所以,我们通过页码减1乘以12(每页项目数量)再加上项的序号就能够计算出正确的序号。
4、设置样式
这一步也要注意,模板中的所有矩形都要取消填充颜色或者设置不透明为0%,否则,会遮挡中继器添加的背景颜色和交替背景色。
经过以上几步设置,我们现在能够看到这样的效果。
第二步,表格上面的X要变成相应的数值。
我们先给显示信息的元件命名为“ListInfo”
页面打开后,这些数值就要呈现出来,所以,在这个元件的【载入时】(在更多事件中)我们添加【设置文本】于“当前元件”的动作,然后点击fx按钮,进行值的设置。
在值的设置界面,我们先创建局部变量获取到【元件】“List”,然后通过系统变量调用它的各个属性,添加到信息文本中。
通过这一步,在预览时我们就能够看到列表信息了。
第三步,为分页条按钮添加翻页的交互。
翻页的交互很简单,都是通过【鼠标单击时】添加【设置当前显示页面】的动作来实现,区别在于上一页、下一页和尾页是在列表中选择,其它的是指定页码。
1、尾页
2、上一页
3、下一页
4、首页
5、各个翻页按钮
各个翻页按钮上的文字即是页码,所以可以通过[[This.text]]获取到当前被点击翻页按钮上的文字填入。这样设置完毕后,可以将交互复制给其他翻页按钮,无需再重复设置。
第四步,点击翻页按钮时,列表信息要跟随发生变化。
我们需要给分页条中每一个按钮【鼠标单击时】都继续添加一个,通过【触发事件】重新触发信息元件“ListInfo”的【载入时】事件。
这里以首页按钮为例。
添加完这个动作后,复制给其它翻页按钮,这样,在翻页的同时列表信息也会被重新加载。
第五步,列表翻页时,对应的翻页按钮文字加粗显示。
翻页按钮的文字样式发生变化,我们首先该想到的是需要设置【选中】时的交互样式。
并且,给这些翻页按钮添加相同的选项组名称,以保证只有一个按钮文字变粗。
提示:关于选项组效果,请到《Axure RP 8入门手册》的在线阅读的相关文章中了解。
这些带有页码的翻页按钮命名为“Tag01”~“Tag06”,为什么到6呢?
因为,我的中继器数据集中共有69条数据,每页12条,共6页。那为什么是69呢?
我就喜欢69,管得着么?
接下来,我们需要考虑的是什么时候选中。
很显然,每个带有页码的翻页按钮【鼠标单击时】,都应该【选中】当前这个按钮,从而文字变成选中时的粗体。
提示:当然也可以设置其他样式,只是对于我来说粗点就行了。
这一个动作也只需要给一个带有页码的翻页按钮设置,然后复制给其它按钮。
另外,还要给首页按钮【鼠标单击时】【选中】“Tag01”的动作;
并且,给尾页按钮添加【鼠标单击时】【选中】“Tag06”的动作。
最后,还有上一页和下一页按钮需要进行处理。
而且,页面刚刚打开时也需要选中一个带有页码的翻页按钮。
那么,我们就在每一个带有页码的翻页按钮【载入时】都添加一个交互。
首先,在条件设置中,我们可以通过局部变量“l”获取中继器“List”这个元件,然后通过“l.pageIndex”获取到当前列表显示页面的页码;如果这个页码【==】“当前元件”的【元件文字】,就执行【选中】“当前元件”的动作。
提示:局部变量“l”的设置,参考第二步中类似的设置;选中当前元件的动作设置,参考上一步中类似的设置。
当为每一个带有页码的翻页按钮设置完载入时的交互之后,我们为上一步和下一步按钮添加交互,这个交互是【鼠标单击时】通过【触发事件】重新执行每一个带有页码翻页按钮的【载入时】交互。
以上一页按钮为例。
因为之前添加过【触发事件】这个动作,我们就在这个动作上继续编辑。
完成这一步后,点击上一页和下一页按钮时,就能根据中继器当前页面的页面选中对应的页码按钮。
以上,就是整个案例的实现过程,是不是长?但是能够弄出来很爽?