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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容