Axure教程:中继器的简单使用说明

中继器,类似数据库作用,以表的形式存储图片、文字等数据信息,通过每项加载时,将数据在页面上展示,可实现数据的增删查改操作

拖入中继器

在元件库中找到中继器组件,拖入页面

Axure教程:中继器的简单使用说明_第1张图片

中继器数据设置

点选中继器组件,在右侧属性界面,可通过工具栏添加或删除行、列,编辑列表头名称和每行对应数据,表头不能使用中文命名

Axure教程:中继器的简单使用说明_第2张图片

中继器排布设置

双击中继器组件,打开中继器内部编辑页面,将中继器所需要的内容对应格式的组件拖入编辑页面,并按需要的排布位置排布,并给拖入中继器中的组件命名(方便一会的数据对应加载设置)

Axure教程:中继器的简单使用说明_第3张图片

中继器数据载入设置

点选中继器组件,右侧属性界面,设置【每项加载时】事件,将已编辑好的中继器各列数据设置到中继器内部对应的组件中

设置图像类数据

Axure教程:中继器的简单使用说明_第4张图片

设置文本类数据

Axure教程:中继器的简单使用说明_第5张图片

效果预览

Axure教程:中继器的简单使用说明_第6张图片

中继器样式设置

点选中继器组件,右侧样式菜单,使用布局,设置垂直分布或水平分布;使用网格排布时,通过设置每排项目数设置每行排布的项目数目;使用背景交替,实现间隔行背景颜色的交替区分显示;设置分页显示,可设置每页显示的项数和开始页码;通过设置行间距、列间距,实现不同的行、列距离的自定义设置(具体效果自行设置预览)

Axure教程:中继器的简单使用说明_第7张图片

添加更多中继器数据

以上过程已完成中继器的数据设置,若想往中继器中添加更多(行)数据,只需要在中继器【属性】界面,添加行编辑更多行数据即可,无需更多操作

Axure教程:中继器的简单使用说明_第8张图片

作者:五月,微信公众号:wuyuepd

你可能感兴趣的:(Axure教程:中继器的简单使用说明)