Axure重要元件三——中继器

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！

 Axure产品经理精品视频课已登录优快云可点击学习https://edu.youkuaiyun.com/course/detail/40420

本节课：中继器

课程内容：认识中继器、中继器基本操作、中继器案例

应用场景：高级表单交互

一、认识中继器

我们不从理论视角去展示中继器，不通俗不易懂，只讲实用下文从实战角度去理解和中继器。

什么是中继器？

1、中继器是数据的集合，是容器。

2、中继器是一个可重复复用的集合。

3、中继器是一个可变化的数据集合。

4、操作中继器可展示数据集变化的过程，是一种可复用、可变化的数据集容器。

5、中继器可进行数据集的添加、排序、删除、修改、查询等操作。

在整个Axure元件的学习中难度五颗星，但是只要我们理解他的内涵，学习起来难度会降低很多。

上图中，数据录入区，我们可以进行数据的录入，页面中的表格，只是展示区域，初学者往往直接双击中继器，那样的是错误的。

二、中继器基本操作

1、添加行：点击右侧数据录入区添加行，来增加页面的行数。添加列同理。

2、格式调整

3、数据录入：

拉开左侧工具，方便数据录入

依次如图填入数据

双击打开中继器，删除单元格，然后拖入一个表格并删除下边两行

为单元格每列数据格式赋予数据分类

回到样式页面开始通过右侧数据录入区进行数据录入

以上是中继器的基本操作，学习步骤：理解中继器的内涵——熟悉格式调整——尝试录入数据学习

---

三、中继器的核心应用场景

1. 动态数据列表

• 用户管理表格：显示用户信息（姓名、邮箱、状态等），支持编辑、删除。

• 商品列表：电商产品展示，支持价格排序、分类筛选。

• 消息中心：聊天记录、通知列表，支持无限滚动加载。

2. 表单与数据提交

• 动态表单生成：根据选项动态添加/删除输入框（如问卷调查）。

• 多行数据录入：如订单明细表，支持新增、删除行。

3. 数据可视化

• 动态图表：绑定数据生成柱状图、饼图（通过矩形模拟）。

• 卡片式布局：如新闻列表、图片画廊，支持不同排列方式。

4. 高级交互功能

• 搜索与筛选：输入关键词实时过滤列表内容。

• 分页加载：模拟后端分页（每页显示N条，点击翻页）。

• 拖拽排序：结合OnDrag事件实现列表项手动排序。

---

四、中继器的使用注意事项

1. 数据结构设计

✅ 合理规划字段：提前定义列名（如Name、Age），避免后期混乱。
✅ 数据类型匹配：文本、数字、日期等字段需与交互逻辑一致。
❌ 避免过多数据：中继器不适合处理超大数据集（超过1000条性能下降）。

2. 交互事件优化

✅ 利用内置动作：

• Add Rows（新增行）

• Remove Rows（删除行）

• Update Rows（编辑数据）

• Filter（筛选）

• Sort（排序）
  ✅ 条件判断：[[Item.Column1 == "A" ? "状态1" : "状态2"]]

❌ 避免复杂计算：如嵌套循环可能影响性能。

3. 样式与布局

✅ 自适应高度：勾选Wrap on text避免内容溢出。
✅ 交替行颜色：通过[[ItemIndex % 2 == 0]]设置斑马纹效果。
❌ 不要固定列宽：响应式设计应允许内容自动调整。

4. 性能优化

✅ 分页加载：每页仅显示10-20条数据，减少渲染压力。
✅ 延迟加载图片：用占位符替代大图，滚动时再加载真实图片。
❌ 避免嵌套中继器：多层嵌套可能导致卡顿。

5. 移动端适配

📱 触摸友好：确保列表项点击区域≥48×48px。
📱 手势支持：如滑动删除（结合OnSwipe事件）。

---

连续课程直通车

Axure重要元件三——中继器-优快云博客

Axure重要元件三——中继器表单制作-优快云博客

Axure重要元件三——中继器查询和统计-优快云博客

Axure重要元件三——中继器时间排序-优快云博客

Axure重要元件三——中继器添加数据-优快云博客

Axure重要原件三——中继器删除数据-优快云博客

Axure重要元件三——中继器修改数据-优快云博客

Axure重要元件三——中继器函数-优快云博客

中继器实现时间读取和修改-优快云博客

如有其他相关问题，欢迎私信沟通，关注  结构化知识课堂-优快云博客

明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏、感谢大家！