006、初步认识Axure的中继器

本篇文章带大家认识认识Axure里的中继器。

01定义

中继器，英文名称叫 repeater ，repeat 是重复的意思，repeater 我们可以理解为不断重复工作的物件。如 [连发枪] 。

那么在Axure中，中继器也是用于重复工作的一个元件。咱往工作区拖入一个中继器，如图：A、默认有三行；B、双击中继器，发现中继器内部只有一个矩形；C、页面展示出三个矩形与中继器数据集中所添加的行数有关。

image

表示中继器展示出来的内容是中继器的数据集控制的。

02、中继器如何控制展示内容

中继器从上文图中，我们可以看到，中继器展示出来的1、2、3矩形和数据集中Column0列下的1、2、3相关联。

矩形上展示的文字，我们可以通过设置文本的动作去实现，在每项加载时执行这个动作。将矩形命名为TEXT_Cl，设置事件如图：

image.png

到这肯定有同学想问，仅仅支持设置文本满足不了我的需求呀，能否也能设置图片呢？答案是[能]。

中继器控制图片内容

往中继器中拖入一个图片元件，命名为Img_Cl，中继器数据集中新增一列，列名为 ImgCl

image.png

从网页上复制一张图片，回到数据集中，点击ImgCl下的单元格，快捷键Ctrl+V，有多少行，就重复多少次。

image.png

设置事件每项加载时，设置图片的值为 [[Item.ImgCl]]

image.png

按下键盘上的F5预览，即可看到效果。

image

竖向太长了不太美观，咱们可以变成横向的，选中中继器，在右侧编辑样式，将布局改为水平即可。

image

image

对中继器，我们已经有初步的认识了，后续说中继器更高级的用法。如：可筛选的商品列表；购物车自动计算金额等。

来个硬广，作者自己整理的一套适用于移动端的元件库，有需要的同学可以前往看看。
灰色元件库链接地址：
https://www.axureshop.com/a/45563.html
橘黄元件库链接地址：
https://www.axureshop.com/a/352.html

文章来自微信公众号“木目原型”

微信ID：mumuaxure