做原型设计这些年我最大的感受是中继器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 中继器内置属性和分页需要用到的函数盘点中继器面板里有几个属性在分页交互中会反复用到它们分别是属性/函数作用与分页的关系Repeater.itemCount中继器数据集的总行数用来算总页数Repeater.visibleItemCount当前显示出来的行数判断当前页是否为空Repeater.dataCount中继器所有数据行数与itemCount类似但使用场景不同Item.Repeater.index当前项在全部数据中的索引判断奇偶行、生成序号[[(Page-1)*PageSize1]]自定义页码计算算当前页第一条数据的序号这些函数并不是文档里最显眼的内容但如果你做过一次完整的分页交互就会明白它们比很多华而不实的效果重要得多。比如删除当前页最后一条数据后自动回到上一页这个细节就需要同时用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。简洁版本的操作姿势如下在中继器数据集中增加一列行号值先随便填加载后会自动更新。在中继器加载时的事件里使用更新行把所有行的行号更新为对应的[[Item.序号]]。在中继器加载时以及所有翻页按钮的单击时添加筛选条件是[[Item.行号 (PageNum - 1) * PageSize 1 Item.行号 PageNum * PageSize]]如果筛选条件为空导致中继器不显示任何行需要检查公式里的变量名是否写错以及大括号是否完整。这个方法的本质是先用序号给每一行做标记再用筛选把范围外的行藏起来视觉上就形成了分页效果。这种做法即便后期数据量很大也不会因为动态面板状态切换导致卡顿。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中是这样配置的选中上一页按钮添加单击时交互。添加条件PageNum 大于 1。满足条件时设置全局变量PageNum的值为[[PageNum - 1]]然后调用中继器的加载事件可以通过触发事件来手动刷新或直接重新执行筛选。不满足条件时什么都不做或者给按钮置灰。下一页按钮同理条件是PageNum 小于 总页数。这里需要一个动态计算总页数的公式Math.ceil(itemCount / PageSize)。在RP9里可以在事件中直接写作[[Math.ceil(Repeater.itemCount / PageSize)]]注意这个公式必须放在中继器的上下文中才能正确读取itemCount通常我会先用一个全局变量TotalPage来存储总页数在数据加载时同步更新后续判断时直接使用TotalPage。4.2 快速跳页一个输入框搞定任意页码跳转除了逐页翻页很多后台系统还需要一个跳页功能用户输入页码点击跳转或回车后列表直接跳到目标页。用RP9实现跳页需要注意输入值是文本这一特点。具体做法是放置一个文本框命名为inputPage属性设置为仅数字或验证输入为数字。放置一个跳转按钮单击时把inputPage的文本转换为数字赋值给PageNum。如果输入值小于1重置为1大于总页数重置为总页数。这里的核心是输入校验不然用户输入一个负数或10000整个分页器就崩了。我通常这样写条件[[Math.min(Math.max(parseInt(inputPage.text), 1), TotalPage)]]这个公式会先取输入值和1的较大值保证下限为1再取结果和总页数的较小值保证上限不超过总页数。这是一个很经典的前端边界处理思路放在原型里一样适用。4.3 动态加载反馈用当前显示范围文字加强真实感分页器做得再花哨如果没有第1-10条共30条这行文字真实感就会大打折扣。这行文字也是动态的它需要依赖中继器的数据量。它的写法是这样的共[[Repeater.itemCount]]条 第[[(PageNum-1)*PageSize1]]-[[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页的筛选结果就会是空的列表直接白屏。我在实际项目中第一次就踩了这个坑后来才总结出一个铁律凡是数据源发生变化的操作必须同时重置页码和重新加载中继器。操作顺序是设置全局变量PageNum 1。设置当前分类标识比如CurrentCategory 已完成。重新执行中继器加载时的筛选逻辑。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来决定是否显示这个提示框。这个交互只需要两步在中继器的加载时事件里添加条件Repeater.visibleItemCount 0。满足条件时显示暂无数据提示框不满足时隐藏它。需要注意的是visibleItemCount在加载完成前可能为0所以这个判断必须放在加载时事件里而不是中继器数据改变前。否则会出现筛选条件刚改完还没渲染提示框闪一下又消失的问题。6. 复盘与排坑中继器分页中我踩过的5个真实问题最后这一章不教新功能只讲我实战中遇到的高频问题。这些问题坑了我不少时间写成文字分享出来希望你能直接绕过去。6.1 页码一多按钮面板怎样避免被撑爆当总页数超过10页甚至100页时静态放置的页码按钮肯定不够用。我在做数据量较大的管理系统原型时会用一个专门的中继器来生成页码原理和列表中继器一样页码、标题、链接都放数据集里根据TotalPage动态添加行。这个方案的逻辑稍复杂但效果很好。具体做法是在分页器加载时事件中先删除旧页码再根据TotalPage循环添加页码。由于RP9不支持for循环语法实际会用到重复触发的技巧——通过一个不可见的计数器变量配合条件判断递归添加直到计数器等于总页数才停止。如果你觉得循环逻辑太难退而求其次的方案是设置6个页码按钮始终显示PageNum-2到PageNum3超过边界用省略号代替。这个方案没有循环纯公式计算就能实现适合大多数原型演示场景。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本身多得多。如果你把上面这套逻辑完整跑通了会发现分页器动态交互加载只是中继器能力的入场券后面不管是排序、多列筛选、批量操作还是跨页面数据联动都建立在今天这套思维框架上。希望这篇经验能让你少走一些弯路至少在我踩过的这些坑上面你可以直接跨过去。