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

示例演示：