Axure 中继器的介绍和使用

目录

一.概述

二.Axure 中继器

        2.1 中继器的基本使用

        2.2 中继器的动作

        2.3 中继器的repeater属性

        2.4 中继器的item属性

三.表格案例

        3.1 三列表格的增删改查的自定义元件

        ​​​​​​​3.2 十列表格的增删改查的自定义元件，带图片

---

一.概述

• Axure 中继器是一种特殊的组件，用于在多个页面或组件中共享数据和状态。中继器可以看作是一个数据存储库，可以在不同的页面或组件中传递数据，实现数据的共享和同步。
• 在 Axure 中使用中继器，需要先创建中继器组件，然后在需要使用中继器的页面或组件中引用该中继器。在引用中继器的组件中，可以使用“设置中继器值”命令来设置中继器的值，并使用“获取中继器值”命令来获取中继器的值，从而实现数据的共享和同步。
• 中继器可以应用于各种场景，例如在多个页面中共享用户输入的数据、同步多个重复组件的状态等。通过合理应用中继器，可以提高 Axure 原型设计的效率和灵活性。

二.Axure 中继器

        2.1 中继器的基本使用

• 使用中继器：1.给中继器的样式导入数据（文字，图片）；2.给中继器添加每项加载时交互事件；3.给中继器中的元件设置内容。（文本/图片）

我们先在基本元件库里找到中继器，将它拖到画布上后，为其设置交互事件：每项加载时。

这时我们可以给中继器设置新的列（取名），并且为这个列填值。然后可以在交互事件里改变中继器所绑定的文本。

添加完列和值后，可以自行选择元件绑定它们，有多少行列就复制多少行列的元件，但值不同。也可以对中继器中的值进行排序。

以下是效果展示：

        2.2 中继器的动作

中继器本身就是一个存储数据的整体集合。通常我们可以借助中继器动作对数据进行增删改查的操作。

• 在按钮交互里添加中继器事件即可实现对表格的操作。

拿新增举例，我们首先得为新增按钮设置一个单击时的交互事件，然后设置一个添加行的动作，拿到各文本框的值，添加到中继器表格各列的值里。

这里给大家展示以下增加的原理以及各中继器动作的效果：

        2.3 中继器的repeater属性

在我们设置文本时可以调用中继器的属性作为文本替代，适用于分页页数等等。

Repeater：中继器的对象
visibleItemCount：中继器项目列表中可见项的数量
ItemCount：加载项数量
dataCount：获取中继器数据集中数据行的总数量
pageCount：获取中继器分页的总数量，即能够获取分页后共有多少页
pageIndex：获取中继器项目列表当前显示内容的页码

• 为了更直观的理解它们的意思和使用，接下来给大家演示一下效果（标注了一下对应属性是哪些数字）：

        2.4 中继器的item属性

在我们设置文本时可以调用中继器的item属性作判断。

item：获取数据集第一行数据的集合，即数据行的对象；
item.列名：获取数据行中指定列的值；
index：获取数据行的索引编号，编号起始为1，由上至下每行递增1；
isFirst：判断数据行是否为第1行；
isLast：判断数据行是否为最末行；
isEven：判断数据行是否为偶数行；
isOdd：判断数据行是否为奇数行；
isMarked：判断数据行是否为被标记；
isVisible：判断数据行是否为可见行；
[[target.text]][[Item.xueke]]：[[target.text]]是获取矩形元件原有的值

• 为了更直观的理解它们的意思和使用，接下来给大家演示一下效果：

三.表格案例

        3.1 三列表格的增删改查的自定义元件

3.2 十列表格的增删改查的自定义元件，带图片