企业官网建设流程全解析

做原型设计这些年，我最大的感受是：中继器（Repeater）这东西，属于"没用它之前觉得列表都好说，用了之后才发现以前全是在硬扛"。早年间给客户做后台管理系统原型，最常见的一句话是"这个表格要能分页，每页10条，还要能按状态筛选"。我当时第一反应是用动态面板塞十几个静态页面，结果数据一改，页面全要重新调，客户随时加一条测试数据，我这边就得加班半小时。直到开始认真用Axure RP9的中继器，才终于把"列表数据切换"和"分页器动态加载"这类交互从体力活变成了真正的逻辑活。

这篇文章就围绕一个实际场景展开：用Axure RP9中继器做一个带分页器的数据列表，支持点击页码切换数据，同时实现分类按钮切换不同数据集，整个过程全部动态完成。无论你是刚接触中继器的初学者，还是已经在用但只会做简单表格的熟练工，这篇都值得你从头到尾看一遍。我需要提前说明一点，本文所有操作都基于Axure RP9的正式版本或官方试用版，不涉及任何非授权渠道，毕竟工具本身只是载体，真正值钱的是你脑子里那套交互逻辑。

1. 中继器做分页：先从"为什么非它不可"说起

很多人问过我：分页列表而已，用动态面板复制几个状态不就行了？为什么非要学中继器？这个问题其实问到了核心。动态面板方案在数据量固定、内容基本不变的原型里确实够用，但一旦涉及"数据增删""条件筛选""页码计算"这些动态需求，静态方案就会全面崩溃。

1.1 动态面板方案的根本局限：数据是死的

用动态面板做分页列表，通常的操作是：把每页内容都做成一个状态，然后通过按钮切换状态来模拟翻页。这个方案的优点是逻辑简单，完全没有学习成本，新手十分钟就能做出一个"看起来能翻页"的列表。但它有一个致命问题：数据是死的。

举个例子，你做了10页静态数据，每页10条，一共100条。领导说"把第57条改成已支付"，你得手动找到第6页第7行的那个矩形，改掉里面的文字。然后领导又说"加一条数据"，你需要在对应的页码状态里再复制一行并调整间距。更可怕的是"删除数据"这个需求——如果第2页的数据删掉一条，后面所有页面的内容都要整体前移，这已经不是工作量的问题，而是错乱概率的问题。

中继器解决的就是这件事：数据集中存放在一个数据表里，表格展示的只是数据的"投影"。你增删改数据表中任意一行，页面上的列表会自动跟随变化，不需要一页一页手动维护。这就是"数据驱动视图"的思路，跟开发里MVC模式的核心思想完全一致。

1.2 分页需求拆解：页码、每页条数、总页数

在用中继器做分页之前，我建议先把需求拆成几个明确的概念，避免做到一半逻辑混乱。一个完整的列表分页功能，无论前端还是原型，本质上都在回答这几个问题：

• 每页显示多少条数据：通常由产品约定，常见值是5、10、20。
• 当前是第几页：用户点击页码时，这个值会变化。
• 总数据量是多少：中继器的数据集行数。
• 总页数怎么算：总数据量除以每页条数，向上取整。

放在Axure RP9的中继器里，这些概念分别对应：中继器的数据集行数、一个用来记录当前页码的全局变量或文本标签、一个用于计算分页范围的数学公式。中继器本身有自带的每项数量和当前显示项索引等属性，但真正做分页时，需要的是一套完整的计算逻辑，而不是简单依赖内置函数。

1.3 中继器内置属性和分页需要用到的函数盘点

中继器面板里有几个属性在分页交互中会反复用到，它们分别是：

这些函数并不是文档里最显眼的内容，但如果你做过一次完整的分页交互，就会明白它们比很多华而不实的效果重要得多。比如"删除当前页最后一条数据后自动回到上一页"这个细节，就需要同时用itemCount和visibleItemCount做判断，缺一不可。

2. 搭建中继器列表：数据表、行样式与事件绑定

在开始写分页逻辑之前，需要先有一个能"动"的列表。很多教程直接跳到分页器部分，结果读者连中继器里怎么给单元格赋值都没搞清楚，后面的代码全都验证不了。所以这里我会把基础步骤也讲透。

2.1 从零创建一个中继器并维护数据集

在Axure RP9里，从左侧元件库拖拽一个"中继器"到画布上，默认会显示三行示例数据，每行由几个矩形组成。你需要先在右侧面板找到"样式"下的"数据集"，双击进入编辑界面。这里的表格就是中继器的数据源，每一列对应一行数据中的一个字段。

我建议你根据业务场景预设好列名，比如准备做一个任务管理列表，那么列名可以是：任务名称、负责人、状态、截止日期。这些列名后面会在公式里反复引用，所以命名一定要规范，不要用中文特殊符号，也不要带空格。

填充数据时有一个小技巧：一次性把测试数据全部填进去，哪怕暂时用不上，也先把数据量撑起来。比如你先填个30条左右的数据，这样后面做分页时能明显看到翻页效果。如果只填三五条，分页逻辑对不对根本看不出来。

2.2 单元格交互：中继器内的"行"和"单元格"绑定

中继器的每一行默认都是一组矩形，每个矩形对应数据集里的一个字段。要实现动态绑定，需要双击进入中继器内部，选中某个矩形，在"属性"面板的"文本"设置里填入对应的公式。

公式的写法非常固定：

[[Item.任务名称]] [[Item.负责人]] [[Item.状态]]

假如你的列名是英文，就写成[[Item.taskName]]这种方式。这里要注意，中继器内部的矩形是一切可视化呈现的基础，左下角那个标注了Repeater字样的区域才是整个中继器的行模板。如果你在行模板外面放矩形，它是不会跟随数据重复显示的。

我见过不少新手在中继器的行模板里放了一堆内容，但始终没发现自己是把内容放到了中继器的背景里，导致数据行虽然生成了，内容却是空的。解决方法是选中中继器后再次双击，确认自己是否进入了Repeater内部编辑态，通常在左侧的页面结构里能看到一个缩进的层级关系。

2.3 "新增行/删除行/更新行"三种基础事件要练熟

中继器的数据不是只能在数据集面板里手动维护，它可以在交互事件里被动态修改。这三个方法的逻辑会在后面的"数据切换"中发挥巨大作用：

• 添加行Add Rows：向中继器数据集末尾追加新数据，多用于表单提交后刷新列表。
• 更新行Update Rows：根据匹配规则修改某一行或多行的数据，通常配合[[Item.列名]]和TargetItem定位。
• 删除行Delete Rows：按照条件删除一个或多个数据行。

分页过程中其实不太需要动态改数据，但做"筛选"时，大部分人会用Remove Sort和Add Sort的组合来实现排序，用"移除筛选/添加筛选"来控制显示哪些数据。如果把数据集比作一个仓库，那么分页就是"每次只从仓库里取一箱货出来展示"，而筛选则是"这一箱货里只挑出符合条件的那几件"。

3. 给中继器加分页：变量、公式与页码高亮的完整链路

这一节是整篇文章的核心。我会把分页器的所有逻辑拆成一个一个可落地的步骤，你跟着做就能看到效果。

3.1 设置全局变量：当前页码和每页条数

在RP9中，点击顶部菜单"项目"里的"全局变量"，添加两个变量：

• PageNum：默认值是1，表示当前页码。
• PageSize：默认值是10，表示每页显示10条。

为什么要用全局变量而不是直接用文本框的值？因为页码在多个交互里都需要被读取和修改，如果用元件文字能存储，但可读性和维护性都太差。全局变量在RP9里是全局共享的，你可以在任意交互中读取、修改。

3.2 计算数据起始索引：理解"第N页第一条数据"的数学逻辑

分页的核心逻辑其实是一道非常简单的数学题。如果每页显示10条，第1页显示第1到第10条，第2页显示第11到第20条。那第PageNum页的第一条数据的索引就是：

(PageNum - 1) * PageSize + 1

第PageNum页的最后一条数据的索引则是：

PageNum * PageSize

放在Axure RP9的交互公式里，写法是：

[[(PageNum - 1) * PageSize + 1]] [[PageNum * PageSize]]

这组公式是整个分页器的灵魂。中继器显示数据时，并不是把数据集的全部行都显示出来，而是"切一刀"，只显示从起始索引到结束索引这一段。这一刀切在哪，由上面两个公式决定。

3.3 使用"移除排序 + 添加排序"制造分页效果

很多人不知道中继器本身没有"分页"这个属性，它是靠排序来实现分页的。具体做法是：

给中继器添加两个字段：一个是本来就在数据集里的字段，比如编号或序号；另一个是新加的辅助字段排序号，用[[Item.索引]]填充。然后在中继器加载时添加排序规则，按照排序号升序排列。

但关键是，如果我们直接对中继器添加"每页可见数"限制，RP9中继器是没有这个内置功能的。所以我们要换一个思路：通过"隐藏行数"来模拟分页。

这里我提供一个更稳妥的实现方法——使用中继器的"添加筛选（Add Filter）"功能，筛选条件定义为：当前项的序号大于等于起始索引，且小于等于结束索引。但这个方式在数据集发生变化时需要重新计算，复杂度偏高。

因此，在实际项目中我更推荐用"设置显示项"的方式：把中继器的"每项数量"设置为PageSize，然后用"当前显示页码"逻辑来控制数据。不过经过多轮测试，我发现最稳定的方案其实是在中继器加载时，用"更新行"给每一行添加一个不可见的序号字段，然后通过筛选范围控制可见行。这个方法看起来绕，但胜在逻辑清晰，后续扩展筛选、排序时不容易出bug。

简洁版本的操作姿势如下：

1. 在中继器数据集中增加一列行号，值先随便填，加载后会自动更新。
2. 在中继器"加载时"的事件里，使用"更新行"把所有行的行号更新为对应的[[Item.序号]]。
3. 在中继器"加载时"以及所有翻页按钮的"单击时"添加筛选，条件是：

   [[Item.行号 >= (PageNum - 1) * PageSize + 1 && Item.行号 <= PageNum * PageSize]]

4. 如果筛选条件为空导致中继器不显示任何行，需要检查公式里的变量名是否写错，以及大括号是否完整。

这个方法的本质是：先用序号给每一行做标记，再用筛选把范围外的行藏起来，视觉上就形成了"分页"效果。这种做法即便后期数据量很大，也不会因为动态面板状态切换导致卡顿。

3.4 页码按钮组的动态生成和高亮显示

页码按钮是分页器交互中视觉反馈最明显的部分。实现方式有两种：静态放好3个页码按钮，然后动态修改文字和选中状态；或者干脆用一个中继器来生成页码按钮，这样页码数量再多也不怕。考虑到实用性和上手成本，我建议你先从静态页码做起。

假设我们需要展示5个页码按钮，分别是btnPage1到btnPage5。在"中继器加载时"的事件中，依次设置每个按钮的文本为对应页码。比如btnPage1的文本设为：

[[PageNum - 2]]

如果这个值小于1，就显示1；大于总页数时则显示总页数。RP9里可以通过Math.max和Math.min嵌套来实现。

更简单的做法是：页码按钮的文本在每次页码改变时统一更新，按钮的选中状态用"如果当前按钮的值等于PageNum，则选中，否则取消选中"来处理。在Axure RP9中，选中状态可以在"交互"面板里通过"设置为选中状态"来实现，每个按钮都配置"选中"和"未选中"两组样式，比如选中的页码背景色是深蓝色、字体白色，未选中则是浅灰色。

这里有一个非常容易被忽略的细节：按钮的选中样式和取消选中必须成对出现，否则就会出现"上一次点击的按钮一直保持高亮"的问题。我的做法是把"设置选中"和"取消选中"写在同一个事件里，通过条件判断决定哪个按钮选中。

4. 点击翻页与动态加载：上一页、下一页、跳页的交互实现

分页器不是只有静态页码，真正让用户觉得"这原型交互真细"的，是翻页按钮的状态管理和边界控制。

4.1 "上一页/下一页"按钮的逻辑和边界控制

上一页按钮的单击事件逻辑非常简单：把PageNum减1，然后重新加载中继器。但如果当前已经在第1页还点了上一页，PageNum就会变成0，分页计算就全乱了。所以必须在执行减1之前加一个条件判断：当PageNum > 1时，才执行减1操作。

条件判断在RP9中是这样配置的：

1. 选中"上一页"按钮，添加"单击时"交互。
2. 添加条件：PageNum 大于 1。
3. 满足条件时，设置全局变量PageNum的值为[[PageNum - 1]]，然后调用中继器的"加载"事件（可以通过"触发事件"来手动刷新），或直接重新执行筛选。
4. 不满足条件时，什么都不做，或者给按钮置灰。

下一页按钮同理，条件是PageNum 小于 总页数。这里需要一个动态计算总页数的公式：Math.ceil(itemCount / PageSize)。在RP9里，可以在事件中直接写作：

[[Math.ceil(Repeater.itemCount / PageSize)]]

注意，这个公式必须放在中继器的上下文中才能正确读取itemCount，通常我会先用一个全局变量TotalPage来存储总页数，在数据加载时同步更新，后续判断时直接使用TotalPage。

4.2 快速跳页：一个输入框搞定任意页码跳转

除了逐页翻页，很多后台系统还需要一个"跳页"功能：用户输入页码，点击跳转或回车后，列表直接跳到目标页。用RP9实现跳页需要注意输入值是文本这一特点。

具体做法是：

1. 放置一个文本框，命名为inputPage，属性设置为"仅数字"或验证输入为数字。
2. 放置一个"跳转"按钮，单击时把inputPage的文本转换为数字，赋值给PageNum。
3. 如果输入值小于1，重置为1；大于总页数，重置为总页数。

这里的核心是输入校验，不然用户输入一个负数或10000，整个分页器就崩了。我通常这样写条件：

[[Math.min(Math.max(parseInt(inputPage.text), 1), TotalPage)]]

这个公式会先取输入值和1的较大值，保证下限为1；再取结果和总页数的较小值，保证上限不超过总页数。这是一个很经典的前端边界处理思路，放在原型里一样适用。

4.3 动态加载反馈：用"当前显示范围"文字加强真实感

分页器做得再花哨，如果没有"第1-10条，共30条"这行文字，真实感就会大打折扣。这行文字也是动态的，它需要依赖中继器的数据量。

它的写法是这样的：

共[[Repeater.itemCount]]条 第[[(PageNum-1)*PageSize+1]]-[[Math.min(PageNum*PageSize, Repeater.itemCount)]]条

其中Math.min是为了防止最后一页不足PageSize条时，结束索引超过总条数。比如一共23条数据，每页10条，第3页的实际显示应该是第21-23条，如果直接写PageNum * PageSize，就会显示第30条，这明显是错的。

这个细节很多教程都不会讲，但它恰恰是判断一个原型设计师有没有真正理解分页逻辑的试金石。开发拿到原型后看到这个细节，对你的专业度会瞬间产生信任。

5. 数据切换与多状态联动：点击分类按钮动态替换列表内容

分页只是中继器能力的一半，另一半是"切换数据源"。回到文章开头说的场景：客户要求点不同的分类按钮，列表内容跟着变化，分页还要同时重置回第1页。这一步怎么做？

5.1 分类与分页的组合：切换分类时先重置页码

如果列表上方有几个分类按钮，比如"全部""进行中""已完成"，点击不同按钮时，中继器需要展示不同数据。很多人会直接想到在事件里重新给中继器加筛选，但忘了最关键的一个动作：先把PageNum重置为1。

原因很简单：假设用户当前在第5页，他切换到"已完成"分类，这个分类一共只有2页数据，如果不重置页码，第5页的筛选结果就会是空的，列表直接白屏。我在实际项目中第一次就踩了这个坑，后来才总结出一个铁律：凡是数据源发生变化的操作，必须同时重置页码和重新加载中继器。

操作顺序是：

1. 设置全局变量PageNum = 1。
2. 设置当前分类标识，比如CurrentCategory = "已完成"。
3. 重新执行中继器加载时的筛选逻辑。

5.2 利用"添加筛选"和"移除筛选"实现动态分类切换

中继器的筛选功能是动态切换数据源的最佳工具。在中继器的"加载时"事件中，添加一个筛选条件：

[[Item.状态 == CurrentCategory]]

然后分类按钮的单击事件只需要做两件事：更新CurrentCategory变量，重新触发中继器加载。这样列表就会自动只显示符合条件的数据。

如果点击"全部"按钮，则需要移除当前所有的筛选条件。这里有个细节：移除筛选时，必须保证筛选名称一致。如果在"添加筛选"时没有指定名称，后面移除时会发现删不掉，因为系统默认名是随机生成的。所以我在做筛选时一定会先给筛选命名，比如FilterCategory，然后"移除筛选"时选择该名称即可。

5.3 多个数据源场景：中继器里动态更新数据集而不是替换中继器

有些场景比分类筛选更复杂：比如顶部有Tab页，"项目列表""任务列表""用户列表"，每个Tab对应完全不同的数据结构。这时候你可能会想：分别做三个中继器，切换Tab时控制哪个中继器可见。

这个方案也能用，但不是最优解。更好的做法是：用一个中继器，切换Tab时动态更新它的数据集。

具体实现是：在每个Tab按钮的单击事件里，调用中继器的"更新行"或直接使用"添加行/删除行"把数据集替换成当前Tab对应的数据。但RP9里替换数据集没有一键清空再导入的功能，所以需要一个变通方案：使用Delete Rows删除所有行，再使用Add Rows批量添加新数据。

这里要注意的是，"添加行"交互里的每一列都需要手动映射，虽然操作繁琐，但胜在灵活。只要在切换Tab时调用一个公共的事件组（比如用"触发事件"统一调用中继器的"加载"事件），后续增删数据都只改中继器数据集，不需要动任何页面逻辑。

5.4 动态交互加载的"空状态"设计：数据为0时的反馈

数据切换过程中，最容易被忽略的就是"空状态"。比如"已完成"分类下一条数据都没有，此时中继器会显示一个空空的区域，用户会误以为页面坏了。

解决方法是：在中继器外部放一个提示框，初始隐藏，内容是"暂无数据"。在中继器加载完成后，通过条件判断visibleItemCount == 0来决定是否显示这个提示框。

这个交互只需要两步：

1. 在中继器的"加载时"事件里，添加条件：Repeater.visibleItemCount == 0。
2. 满足条件时，显示"暂无数据"提示框；不满足时隐藏它。

需要注意的是，visibleItemCount在加载完成前可能为0，所以这个判断必须放在"加载时"事件里，而不是中继器数据改变前。否则会出现筛选条件刚改完还没渲染，提示框闪一下又消失的问题。

6. 复盘与排坑：中继器分页中我踩过的5个真实问题

最后这一章不教新功能，只讲我实战中遇到的高频问题。这些问题坑了我不少时间，写成文字分享出来，希望你能直接绕过去。

6.1 页码一多，按钮面板怎样避免被撑爆

当总页数超过10页甚至100页时，静态放置的页码按钮肯定不够用。我在做数据量较大的管理系统原型时，会用一个专门的中继器来生成页码，原理和列表中继器一样：页码、标题、链接都放数据集里，根据TotalPage动态添加行。

这个方案的逻辑稍复杂，但效果很好。具体做法是：在"分页器加载时"事件中，先删除旧页码，再根据TotalPage循环添加页码。由于RP9不支持for循环语法，实际会用到"重复触发"的技巧——通过一个不可见的计数器变量，配合条件判断递归添加，直到计数器等于总页数才停止。

如果你觉得循环逻辑太难，退而求其次的方案是：设置6个页码按钮，始终显示PageNum-2到PageNum+3，超过边界用省略号代替。这个方案没有循环，纯公式计算就能实现，适合大多数原型演示场景。

6.2 明明设置了筛选，为什么数据还是全部显示

这个问题的排查思路其实很固定。首先检查筛选条件的公式是否符合语法，RP9对中文引号特别敏感，一旦写成中文全角引号，公式就会失效，中继器会直接放行所有数据。

其次检查筛选是否被"移除"过。如果你在某次交互里使用了"移除筛选"但没重新添加，那么中继器就会显示全部数据。解决办法是在中继器加载时统一添加筛选，这样无论之前怎么操作，加载时会自动应用最新条件。

还有一个隐蔽的坑：中继器在添加筛选时，如果用了Item.状态 == CurrentCategory这种条件，而CurrentCategory变量里存了前后空格，也会导致匹配失败，列表为空。我在分类按钮上通常会统一用trim函数或者直接在变量赋值时手动去掉空格，避免这种低级问题。

6.3 翻页后列表滚动位置没复位，用户以为数据没变

页面内容超过一屏时，翻页后滚动条还停留在原来的位置，用户会以为点击翻页没生效。这个问题在RP9里没有直接的"回到顶部"命令，但可以通过"滚动到元件"交互来实现。

具体操作是：在翻页事件中，添加一个"滚动到列表容器顶部"的交互，把滚动目标设置为列表的最顶部元件，滚动方式选"动画"或"瞬间到达"。这一步虽然不影响数据逻辑，但对整体体验的提升非常明显。

6.4 每页条数切换：10条/20条/50条的下拉联动

有些列表右上角会有"每页显示条数"的下拉框，用户可以改成10、20或50。这个功能实现起来也不复杂，核心就是更新PageSize变量后重置PageNum并重新加载中继器。

下拉框的"改变时"事件里，用条件判断当前选中项的值，然后分别给PageSize赋值。之后必须重置PageNum = 1，不然当前页码超过新的总页数时，列表也会空白。

6.5 原型性能优化：数据量过大时中继器卡顿的处理

中继器数据量达到几百上千行时，Axure RP9在浏览器里的渲染速度会明显下降。如果你只是做演示，建议把测试数据控制在50条以内，保证操作流畅即可。如果真的需要展示大数据量场景，可以只保留前100条数据，在页面顶部加一行提示"仅展示前100条测试数据"。

另一个优化技巧是：避免在中继器行模板里放过多复杂元件或高分辨率图片。一张大图片乘以100行，预览时就是100张图片同时渲染，卡顿几乎是必然的。

中继器的分页和数据切换，说白了就是"数据管理+条件筛选+边界控制"三个能力的组合。我做了这么多年原型，回头再看这类需求，已经不会一上来就摆十几个动态面板状态了，而是先把数据结构、分页公式、筛选条件理清楚，再动鼠标去拖元件。这个过程省下来的返工时间，远比学习Axure RP9本身多得多。

如果你把上面这套逻辑完整跑通了，会发现"分页器动态交互加载"只是中继器能力的入场券，后面不管是排序、多列筛选、批量操作，还是跨页面数据联动，都建立在今天这套思维框架上。希望这篇经验能让你少走一些弯路，至少在我踩过的这些坑上面，你可以直接跨过去。