本篇文章带大家认识认识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
文章来自微信公众号“木目原型”
网友评论