Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具，广泛应用于产品设计、UI/UX 设计及交互设计中。中继器（Repeater）作为 Axure 中的一个重要元件，以其强大的数据处理和动态交互能力，成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用，以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面，详细介绍中继器的使用方法和案例。
预览地址：https://1zvcwx.axshare.com
一、中继器基础
创建中继器
- 拖入中继器：在 Axure 画布中，从元件库（Libraries）面板中的“通用（Common）”元件库中拖入一个中继器（Repeater）。
- 编辑中继器内容：双击中继器进入编辑模式，可以添加或删除内部元件，如矩形、文本框、图片等。这些元件将作为重复项的基础模板。
设置中继器数据
- 添加数据列：在中继器的“样式”面板中，通过“数据集（Dataset）”部分可以添加数据列，列名即为变量名。
- 输入数据：在数据集表格中，可以输入具体的数据，每行代表一个数据项。
引用数据变量
在中继器内部，通过[[Item.varName]]的方式引用数据变量，其中varName是数据列的名称。例如，如果有一个名为“name”的数据列，则可以通过[[Item.name]]来引用。
二、中继器进阶
动态列表/表格
中继器可以将数据以列表或表格的形式展示，并支持自定义样式和布局。例如，可以制作产品列表、新闻列表等。
数据筛选和排序
中继器支持数据筛选和排序功能。通过设置筛选条件和排序规则，可以方便地查找和比较数据。例如，可以按价格从低到高排序产品列表。
数据编辑和删除
通过添加编辑和删除按钮，并设置相应的交互事件（如“更新行”和“删除行”），中继器允许用户修改和删除数据项。这可以模拟真实的数据操作流程。
三、中继器高级
分页控制
默认情况下，中继器不分页显示所有数据。为了优化用户体验和系统性能，可以对中继器进行分页。在“样式”窗口中，选中“分页”选项，并设置每页显示的项目数量和起始页。
合计
对于需要合计的数据（如财务报表、统计图表），中继器提供了便捷的计算方式。通过在表尾添加合计项，并使用Item.varName + target.text等表达式，可以实现数据的自动合计。
列表拖动
为了增加交互性，中继器支持列表拖动功能。这通常需要使用动态面板来实现。通过设置拖动开始、拖动过程中和拖动结束时的交互事件，可以模拟列表项的拖动排序效果。
列表滑动删除
列表滑动删除是移动应用中常见的交互方式。虽然 Axure 没有直接提供滑动删除的功能，但可以通过添加滑动手势的交互模拟来实现。例如，使用“拖动”事件结合“条件判断”和“删除行”操作，可以模拟滑动删除的效果。
表内修改
表内修改是指直接在表格中编辑数据项的内容。通过在表格中添加文本框等输入元件，并设置“失去焦点”时的交互事件（如“更新行”），可以实现数据的即时修改。
分页器控制
合计（包含自动合计/选中合计）
列表拖动
表内修改
中继器是 Axure RP 中一个功能强大的元件，它允许用户快速创建、展示和操作重复的数据项。通过掌握中继器的基础、进阶和高级应用，设计师们可以制作出更加真实和可靠的原型设计。无论是产品列表、新闻列表还是用户评论区，中继器都能提供便捷的数据处理和动态交互解决方案。希望本文的教程和案例能够帮助大家更好地理解和应用中继器。
推荐Axure元件库，助力高效设计：
Axure高端交互元件库：助力产品与设计-CSDN博客
ElementUI元件库在Axure中使用-CSDN博客
Axure打造科技感数据可视化大屏原型-CSDN博客