Axure中继器实战：从零搭建商品列表与进阶交互

1. 为什么中继器是Axure进阶的分水岭

做原型的人大概都经历过这个阶段：静态页面画得飞起，元件对齐、样式统一、交互跳转都玩得转，但一碰到"列表"就犯怵。商品列表、订单列表、消息列表、通讯录——这些在真实产品里最基础的结构，在Axure里如果靠复制粘贴一个个堆，改一个字段就要动十个地方，维护成本高到让人想砸键盘。

中继器（Repeater）就是来解决这个问题的。它的本质是一个数据驱动的容器：你给它一份数据表，它按照你定义的模板把每一行渲染成一个元件组，数据变了，界面自动跟着变。听起来像前端框架里的列表渲染对吧？没错，思路几乎一模一样——数据与视图分离，模板负责长什么样，数据负责显示什么。

案例16"制作商品列表"就是中继器最经典、最实用的入门场景。一个电商商品列表通常包含：商品图、商品名、价格、销量、标签、按钮。如果用传统方式，你要画6个商品就得复制6组元件，每组改文字改图片，后期加一个"促销标签"字段，6组全得手动补。而用中继器，你只需要维护一张数据表，加一列字段，模板里拖一个元件绑定上去，所有行同步生效。

这篇文章我会把整个制作过程拆透：从数据表怎么设计、模板怎么搭、交互怎么绑，到分页、排序、筛选这些进阶玩法，再到我实际做项目时踩过的坑。适合已经会Axure基础操作、想跨过中继器这道坎的产品经理、交互设计师和独立开发者。看完你至少能做到：拿到任何一个列表需求，第一反应是"这个用中继器怎么拆字段"，而不是"我要复制几行"。

2. 中继器的核心机制与数据表设计

2.1 中继器到底在背后做了什么

很多人学中继器卡住，是因为把它当成一个"高级元件"来理解，其实它更像一个微型数据库加渲染引擎。你在中继器里看到的每一行，都是它从内部数据集里读出来、套上模板、生成的一份副本。理解这一点，后面所有操作都顺了。

中继器的内部结构分三层：

• 数据集（Dataset）：一张表格，列是字段名，行是记录。默认有Column0、Column1这种占位列，你可以重命名成name、price、img等有意义的字段。
• 模板（Item Template）：定义"一行长什么样"。你在模板里放的元件，就是每一行渲染出来的样子。
• 交互（Interactions）：中继器自身可以响应"每项加载时"这类事件，用来做条件判断、动态改样式。

关键点在于：模板只画一次，数据有多少行就渲染多少份。这就是它和复制粘贴的本质区别。复制粘贴是"所见即所得"的静态堆叠，中继器是"数据驱动"的动态生成。

2.2 商品列表该拆哪些字段

字段设计是第一步，也是最容易返工的一步。拆得太粗，后期想加功能发现数据不够；拆得太细，维护起来又累。我的经验是：按"会独立变化的最小单元"来拆。

一个典型的商品列表，我一般会拆成这些字段：

这里有个细节：价格和销量一定要存成数字，不要存成"¥99"这种带符号的字符串。因为后面做排序、做条件判断（比如"销量大于1000显示热卖标"）时，数字才能参与运算。符号和单位在模板里用文本元件单独拼上去，这样数据和展示就解耦了。

提示：字段名建议用英文或拼音，避免中文。虽然Axure支持中文列名，但在写表达式引用时，中文容易因为输入法或编码问题出错，排查起来很烦。

2.3 数据从哪来：手动录入还是导入

中继器数据有两种来源。少量数据直接在数据集面板里手动敲，适合做Demo。数据多的话，可以用"导入"功能从CSV或Excel粘贴进来——Axure支持把表格数据直接粘贴到数据集里，列会自动对应。

我实际做项目时，如果商品有几十条，会先在Excel里整理好，确保列顺序和中继器字段顺序一致，然后全选复制，在中继器数据集里点第一行第一列粘贴。这样比一条条敲快得多。注意粘贴前先把中继器的列数调整到和Excel一致，否则会错位。

3. 从零搭建商品列表的完整实操

3.1 第一步：拖入中继器并规划模板尺寸

新建一个页面，从元件库拖一个中继器到画布上。默认它带一个矩形占位，先别急着改。我的习惯是先确定单行卡片的尺寸，因为这决定了整个列表的布局节奏。

假设做的是移动端商品列表，单行卡片我一般设为宽375、高120。这个高度能放下左侧商品图（100×100）、右侧标题两行、价格一行、销量一行。如果是PC端横向排列的卡片流，单行尺寸又不一样。先定尺寸再画模板，能避免后面反复调整。

把中继器本身的尺寸设成和单行卡片一致（375×120），这样它默认只显示一行的高度。中继器的"布局"属性里可以设置每行显示几个、行间距多少，这个后面讲。

3.2 第二步：在模板里搭出单行卡片

双击中继器进入模板编辑状态。这时候你看到的画布就是"一行"的绘制区域。按下面的结构摆放元件：

• 左侧放一个图片元件，尺寸100×100，命名imgBox，用于绑定商品图。
• 右侧上方放一个文本标签，命名goodsName，宽度约250，设置自动换行、最多显示两行。
• 标题下方放一个文本标签，命名priceText，用于显示现价。
• 价格右边放一个文本标签，命名originalPriceText，设置删除线样式，用于原价。
• 再下方放文本标签，命名salesText，显示销量。
• 右上角放一个文本标签，命名tagText，做促销标签，默认隐藏。

每个元件都要起有意义的名称。这是中继器操作里最容易被忽视但最重要的一步。因为后面绑定数据、写交互，都是靠元件名称来引用的。如果全是"文本1""文本2"，你根本分不清谁是谁。

3.3 第三步：把字段绑定到元件上

绑定数据有两种方式。最简单的是在模板里选中元件，然后在数据集面板里把对应列拖到元件上，Axure会自动建立绑定关系。另一种是选中元件，在"交互"里添加"设置文本"动作，值选对应的字段。

我推荐用拖拽绑定，快且不容易错。具体操作：选中goodsName文本，在数据集面板找到goodsName列，直接拖到文本上，松手。这时文本内容会变成"[[Item.goodsName]]"这样的表达式。priceText绑定price，salesText绑定sales，imgBox绑定imgUrl。

价格和销量需要拼接单位，所以不能直接绑。做法是：选中priceText，在"设置文本"里写表达式¥[[Item.price]]，销量写已售[[Item.sales]]件。这样数字和单位就拼在一起了。

注意：图片字段绑定后，如果数据里填的是本地图片路径，预览时可能显示不出来。稳妥的做法是把图片先拖进Axure的图片文件夹，用相对路径引用，或者直接用网络图片地址。

3.4 第四步：设置中继器的布局与分页

回到中继器本身，在属性面板里找到"布局"设置。这里有几个关键参数：

• 每行项数：移动端列表设为1，PC端卡片流设为3或4。
• 行间距：一般设10到16，看设计节奏。
• 分页：可以设置每页显示多少项。做长列表Demo时，分页能让预览更真实。

如果要做"加载更多"的效果，分页设置里选"多页"，然后配合一个按钮触发"下一页"动作。这个后面进阶部分细讲。

设置完布局，预览一下，你应该能看到数据表里的每一条都渲染成了一行卡片。如果只显示一行，检查是不是中继器高度被限制住了，或者布局里每行项数设成了1但高度不够。

4. 让列表活起来：排序、筛选与分页

4.1 用交互实现点击排序

静态列表谁都会做，真正体现中继器价值的是动态排序。比如点击"价格"按钮，列表按价格从低到高排；再点一次，从高到低。

实现思路：给排序按钮添加"单击"交互，动作选"中继器-排序"。在弹出的设置里，选择排序字段（比如price），选择升序或降序。如果要实现"点一次升序、再点降序"的切换，需要用一个全局变量记录当前状态，然后用条件判断来切换排序方向。

具体做法：新建一个全局变量sortOrder，初始值设为"asc"。按钮单击时，添加条件"如果sortOrder等于asc"，则执行降序排序并设置sortOrder为desc；否则执行升序排序并设置sortOrder为asc。这样一次点击就能切换。

4.2 用筛选做分类切换

商品列表常见的"全部/热销/新品"切换，本质是按条件筛选数据。给分类按钮添加交互，动作选"中继器-添加筛选"。筛选条件可以写表达式，比如"销量大于1000"或者"标签等于热销"。

筛选是叠加的，多个筛选条件会同时生效。所以切换分类时，要先"移除所有筛选"，再添加新的筛选条件，否则条件会越积越多，结果越来越窄。这个坑我踩过，当时列表越点越少，排查半天才发现是筛选没清空。

4.3 分页与加载更多的取舍

分页和加载更多是两种不同的交互模式，选择取决于场景。分页适合数据量大、需要快速跳转的场景，比如后台管理列表。加载更多适合移动端信息流，用户不断下滑，内容持续追加。

用中继器做加载更多，思路是：初始只显示第一页，点击"加载更多"按钮时触发"下一页"动作，同时把新一页的数据追加到当前视图。Axure的中继器分页动作里有"下一页"选项，配合"滚动到底部时"的交互，能做出接近真实App的体验。

不过要注意，Axure的分页是替换式的，翻到第二页时第一页的内容会被替换掉，不是追加。如果想做真正的"追加"，需要用"添加行"的方式动态往数据集里塞数据，复杂度会高一些。做Demo的话，替换式分页通常够用了。

5. 实操中那些没人告诉你的坑

5.1 元件命名混乱导致绑定失效

这是新手最高频的问题。模板里元件一多，命名随意，绑定数据时拖错列，或者后期改字段名忘了同步更新绑定，预览时数据就是不出来。我的习惯是：模板里每个元件命名后，立刻在名称前加个前缀标明类型，比如txt_goodsName、img_goodsImg、btn_buy。这样在交互列表里一眼就能找到目标。

5.2 中继器高度自适应失效

中继器默认高度是固定的，数据多了会溢出被裁掉。要让它自适应内容高度，需要在属性面板里勾选"适应内容"或者手动设置高度为自动。但有时候勾了还是不生效，多半是因为模板里元件的定位方式有问题——如果模板内元件用了绝对定位且超出模板边界，中继器计算高度会出错。模板内元件尽量用相对定位，或者确保都在模板可视区域内。

5.3 图片加载慢或显示不全

中继器里放图片，如果数据源是网络图片，预览时可能因为网络问题加载不出来。另外图片元件默认是"填充"模式，如果原图比例和元件比例不一致，会被拉伸变形。解决办法是把图片元件的填充方式改成"包含"或"覆盖"，根据设计需求选。包含会留白，覆盖会裁剪，看你要哪种效果。

5.4 排序和筛选同时用时的冲突

前面提过筛选要清空，排序也有类似问题。如果先排序再筛选，筛选后的结果可能不是按排序顺序来的。正确的顺序是：先筛选出目标数据集，再对结果排序。在交互里就是先执行筛选动作，再执行排序动作。顺序反了，结果就不对。

下面这张表整理了我遇到过的典型问题和排查方向：

6. 从商品列表延伸出去的玩法

中继器一旦玩熟，你会发现它能套用的场景远超想象。商品列表只是最基础的形态，同样的思路可以做出：通讯录（字段换成姓名、电话、头像）、订单列表（字段换成订单号、状态、金额）、消息中心（字段换成发送人、内容、时间）、数据看板（字段换成指标名、数值、趋势）。

更进一步，中继器还能和全局变量、函数结合，做出带搜索功能的列表。思路是：搜索框输入关键词，触发中继器筛选，条件写"商品名包含输入框的值"。Axure的表达式里支持indexOf这类字符串函数，能实现模糊匹配。

还有一个进阶玩法是中继器嵌套。比如商品列表里每个商品有多个规格，点开才显示。外层中继器渲染商品，内层中继器渲染规格，通过"每项加载时"事件把外层数据传给内层。这个复杂度高，但做出来的原型非常接近真实产品。

我个人的体会是，中继器学习的投入产出比极高。花一个下午把商品列表这个案例彻底吃透，后面遇到任何列表类需求，你都能在半小时内搭出可交互的原型。真正难的从来不是操作，而是数据字段怎么拆、交互逻辑怎么设计——这两件事想清楚了，剩下的就是拖拖拽拽的体力活。

最后分享一个小技巧：做复杂中继器时，先在纸上画出数据表和模板结构，标清楚每个字段对应哪个元件、哪个交互引用哪个字段。画完再动手，能省掉大量返工。我早期就是直接上手拖，结果做到一半发现字段不够用，只能推倒重来，那种感觉比加班还难受。