Axure教程：中继器基础应用——数据展示、新增、删除

中继器——Axure中复杂的元件，没有之一。中继器是Axure中最强大的元件，通常用于页面效果展示时使用。但对于新手小白来说，这个元件的使用不是那么的友好，学习成本较高……在本文中，将对中继器的基础和简单的使用包括数据展示、新增、删除功能的实现进行详细讲解，希望能帮助你更好的理解中继器~

目录：

中继器是什么

中继器什么时候用

怎么使用中继器（包括各模块与基本使用流程介绍）

基础应用1——表单数据集展示

基础应用2——PC端表单数据新增

基础应用3——PC端表单数据删除

中继器是什么

中继器（repeater）英文为“重复”的意思，在Axure中可以理解为重复的使用同一个模板，通过向行列数据矩阵中进行数据处理后展示的小型数据库。

（由于这个是原型而不是真的数据库没有进行存储，因此通过演示处理的数据不会真正的进行存储）

中继器什么时候用

在日常文档与原型说明中，由于不需要动态演示，进行原型说明即可，所以较少使用。

在特殊场景，如跟老板演示，需要进行页面效果展示时则需要使用该元件。

具体用处：

通过了解中继器的使用，可以了解数据库、函数、变量的基本概念，拓展知识。

PC端/移动端列表展示统一模板。

动态交互包括列表新增、删除、修改、查询等，可以通过动态交互实现。

怎么使用中继器

使用模块介绍：

主要分三个部分，包括：中继器、“数据库”、交互设置。

中继器：设置该模块的模板样式；

“数据库”：设置中继器中需要展示的数据数量与内容；

交互设置：主要进行中继器与“数据库”的关联处理等操作。

下图中包括各模块位置与对应使用流程顺序：

基础应用——表单数据集展示

关联数据展示为中继器最简单的使用方式，我们先来看下完成效果。

实现流程：开始–>在中继器中绘制模板–>展示表格美化–>对“数据库”列数据进行命名–>数据录入–>关联模板元件与数据库列数据–>完成。

（1）拖入中继器，进入编辑中继器模板与对应模板命名

设置中继器单条数据的模板，后续在“数据库”中增加多条数据都会应用同一个模板进行重复，对应模板中使用的元件进行命名，是为了后续关联展示数据的元件与数据库的“列”时方便查找对应元件

Tips：如果有通用的功能，即所有数据都有，如删除、复选框，可在模板直接放置。（后续不进行关联则所有数据都展示）

（2）对展示表格进行美化、对“数据库”列数据进行命名与数据录入

1条数据为单条数据，多行则为重复使用多次模板的多条数据，如录入2行则重复2次模板展示；录入3行则重复3次模板展示。

（3）将中继器模板元件与“数据库”关联，展示数据库的数据

在交互设置中，选择【Onitemload（每项加载时）】，双击进入设置关联内容；选择Set Text（设置文字），勾选中继器的模板元件对应设置为“数据库”中的对应“列”，具体演示如下图所示。

以上操作做完后，即可达到完成效果拉，后续需要增加数据直接在“数据库”中增加就可以啦~

与PC端表单使用同样的方法进行移动端的页面绘制：

移动端模仿淘宝页面进行绘制，以下为完成效果。其中商品列表部分是使用中继器进行绘制，绘制的方法与pc端基本相同，下面对不同点进行说明。

不同点：图片导入。