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

首先提醒一下,这个很长,有些人可能会受不了!

先来看看要实现的内容。

这是一个学生成绩的表格。

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

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”的设置,参考第二步中类似的设置;选中当前元件的动作设置,参考上一步中类似的设置。

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

以上一页按钮为例。

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

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

以上,就是整个案例的实现过程,是不是长?但是能够弄出来很爽?

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/repeater_page.zip

 

 

 

 

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 中继器信息获取与分页条的实现

喜欢 (5)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 吴天明,社会楼
    越过谎言拥抱你2017-09-04 17:56 回复
  2. 哪长了,还没我的长。 :mrgreen:
    大楼2017-09-05 09:09 回复
    • 标准18?
      几点小土2017-09-05 14:35 回复
      • 什么呀,我说的是数据。你真污。呸! 😆
        大楼2017-09-06 09:37 回复
  3. 上一页 下一页为什么都不好使,点击没反应?
    呵呵哒2017-09-15 20:48 (7天前)回复
    • 小楼一夜听春语
      先把汉化换成本站汉化试试
      小楼一夜听春语2017-09-15 21:59 (7天前)回复