美文网首页手把手教你做Axure原型
006、初步认识Axure的中继器

006、初步认识Axure的中继器

作者: 黎木目 | 来源:发表于2018-08-11 12:36 被阅读1次

    本篇文章带大家认识认识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

    相关文章

      网友评论

        本文标题:006、初步认识Axure的中继器

        本文链接:https://www.haomeiwen.com/subject/kwqdbftx.html