当前位置:   article > 正文

axure中继器求和_Axure教程:(高级)中继器爬过的那些坑

中继器列求和

本教程主要是运用【中继器】制造列表排版、单选框选中及数据项背景交替的展示效果。如下:

一、页面布局

从左侧元件库拉入四个【矩形】作为列表表头,随意命名。再拉入一个【中继器】作为列表展示,复制表头的四个【矩形】,双击【中继器】进入编辑页面,粘贴矩形,更改背景色,分别命名为勾选框、a、b、c。

其次,再拉入一个单选框,排版如下:

三、添加交互

1、想要更改列表中的展示数据,需要先给中继器配置数据列表,类似数据库。选中中继器,可以看到属性下面有列表框,如下:

点击【添加列】添加三列数据,填入相应的字段,如果想增加行数,可以点击【添加行】,如下:

2、接下来需要给中继器中的列表框配置数据链接,让中继器中的列表a、b、c对应数据库中的列表itema、b、c。

双击【属性】中的【每项加载时】交互事件,进入设置页面,如下:

勾选矩形a、b、c,并设置文本值分别为:[[Item.a]]、[[Item.b]]和[[Item.c]],如下:

3、预览效果如下:

四、交互细节调整

1、点击预览中的单选框,发现点击后会全部选中,无法实现单选效果,如下:

这时,我们需要双击中继器进入编辑页面,给单选框【设置单选按钮组名称】,命名为1,如下:

然后,还需要将中继器中【隔离单选按钮组效果】和【取消选项组效果】勾选去掉。如下:

预览效果如下:

2、如果想实现列表中的数据背景有两种颜色分层效果,可以在中继器的【样式】中的【背景】,勾选【交替】,分别设置两种背景填充色。如下:

其次,最重要的是,需要将中继器中的矩形的背景色填充色去掉,否则无法看到效果,设置如下:

五、预览效果

学习更多教程,可关注本人公众号:艾斯的Axure峡谷。

欢迎大家留言评论,也可以留下你的评论,期待想看到的交互效果。

示例下载:百度网盘

提取码: m53j

示例演示:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/110124
推荐阅读
相关标签
  

闽ICP备14008679号