如果你做过一两版管理后台或者数据看板类的原型多少应该遇到过这种场景客户要求列表能够按状态切换比如全部订单、待处理、已完成下面还配一个分页器点一下页码数据要跟着翻页。最早我给这种页面做原型的时候用的是最笨的办法——把几十行静态数据直接摆在画布里然后复制好几套页面再在外面套一堆显隐逻辑。结果数据一多光是改一条订单号都要翻好几个页面更别提让页码器真正“动”起来。后来我从中继器入手把列表、筛选切换和分页器都打通了才算是真正把高保真原型做到了可交付的程度。这篇文章就围绕“Axure RP9 利用中继器实现列表数据的切换分页器数据的动态交互加载”这个主题来写。我会从最基础的中继器数据结构讲起逐步落到列标题排序、条件筛选、状态切换最后重点拆解分页器的实现原理和动态页码逻辑。所有操作都基于 Axure RP9步骤尽量能直接照着做。适合刚接触中继器但想一步到位做出可交互列表的人也适合已经做过一些中继器页面、却始终没把分页这块理顺的同学。先说一下成果预期。做完之后你的原型里会有一个真正的数据列表点列标题自动排序切筛选条件列表数据跟着切换点上一页/下一页/页码按钮中继器里的数据会动态加载新一页页码高亮和按钮禁用状态也会跟着联动。下面开始。1. 中继器到底是个什么东西一个能循环渲染的“小数据库”很多刚接触中继器的人第一眼看到这个组件都会有点懵它看起来就是一个带了一行样式的矩形区域远不如文本框、按钮那么好理解。但如果你打开它的属性面板找到“数据集”入口一切就会清晰很多。可以说中继器不只是一个视觉组件它本质上是在 Axure 里内置了一个“数据表 行模板”的组合结构。1.1 中继器的数据承载结构Axure 里的中继器乍看很像一个普通的矩形列表组件但打开它的属性面板你会看到一个“数据集”入口。点进去之后看到的就是一张类似 Excel 的表格。这张表就是中继器的数据源每一列是一个字段每一行是一条记录。中继器外部那个可视列表本质上只是一个“行模板”数据表里有几行它就按这个模板重复渲染几次。我习惯把它理解成一个微型数据库。你不用在画布上手动复制100行只需要在数据表里维护100条记录模板只做一份。每条记录的字段可以通过[[Item.字段名]]这种写法取出来显示在行内的文本或者图片上。数据驱动界面这就是中继器最核心的价值。这种结构的好处是数据和表现被彻底分离了。你在编辑态看到的只是一个个字段引用而不是写死的文字。当客户说“把这条数据改成另一个客户”你不需要在画布上找半天然后改文本只需要到数据集里改一行数据列表会自动刷新。1.2 为什么做列表和分页优先选它做列表数据切换和分页本质上做的是三件事数据源的维护、显示范围的切片、交互状态的联动。中继器自带数据表天然解决了数据源的问题它又有“添加筛选”“移除筛选”“添加排序”“移除排序”这些内置交互显示范围的切片可以不用写一行代码就能完成配合全局变量和条件判断当前页码、状态筛选、按钮禁用这些联动也能在一个页面里实现。如果你还在用传统方式——先画一个表格把数据一行行敲进去再做几个隐藏的重复版本来模拟切换——那我可以直接告诉你项目到后期一定会在两个地方崩溃一是数据变更时维护成本高到离谱二是交互真伪很容易被客户一眼看穿。中继器虽然上手有点门槛但花一两个小时搞清楚后面所有列表类原型都用得上。2. 页面搭建与数据准备先把“小数据库”建好在写任何交互之前第一步永远是准备好数据。这一步看着基础但很多人在后面分页出错回头检查发现就是数据源没建好。所以这里我会把字段设计、模板绑定、排序切换、状态筛选全部过一遍这些都是后续分页的基础设施。2.1 从零开始建数据集和字段打开 Axure RP9新建页面把“中继器”组件拖到画布中默认在 Default 库和矩形、文本这些基础组件在一起。双击画布上的中继器会进入它的内部编辑态里面默认带了一个矩形“Item”这就是行模板。先别急着改样式回到上一层再单击中继器组件找到右侧样式面板里的“数据集”点进去。数据集编辑界面类似一个表格默认有 Column0、Column1 等几列。直接在这些列名上双击改名并录入示例数据。我这里用订单列表举例建议字段如下订单编号、客户姓名、所属城市、订单金额、订单状态、下单时间再加一个“编号”。这个“编号”字段很多人会忽略但它是后面分页筛选的关键锚点来源就是数据集里的顺序号从1开始依次排不能乱。编号订单编号客户姓名所属城市订单金额订单状态下单时间1ORD1001张明上海298已完成2025-01-112ORD1002李婷北京539待处理2025-01-113ORD1003王芳广州120已完成2025-01-104ORD1004刘洋深圳880待发货2025-01-095ORD1005陈杰杭州360待处理2025-01-086ORD1006赵敏成都1020已取消2025-01-07先录入这一批数据每页显示5条的话前5条就是第一页加上第6条后第二页会有1条。这样后续调分页逻辑时能够明显看到翻页效果。2.2 行模板和文本绑定回到中继器内部编辑态我会删掉默认的矩形放一个表格行需要的几个文本控件订单编号、客户姓名、城市、金额、状态。然后分别选中这些文本在右侧“交互”面板里找到“设置文本”点击 fx 或者直接选择“插入变量或函数”从下拉列表里选择中继器的字段写出来就是[[Item.订单编号]]这种形式。这样每一行渲染时文本都会自动取当前行的字段值。一个容易忽略的细节金额这种字段如果是数字类型的列在数据集里录入时直接用纯数字不要在数字中间加“”或逗号。显示时可以在文本的“设置文本”里拼上单位比如写[[Item.订单金额]] 元这样既保证数据可参与排序显示上又不损失可读性。如果你把写进数据集后面的排序和计算很容易踩坑。2.3 列标题点击切换排序列表数据切换最常见的场景就是点表头“金额”按金额从高到低排、点“时间”按最新时间排。拿“订单金额”列标题举例选中该列标题所在的矩形在右侧“交互”面板添加“鼠标单击时”事件选择“添加排序”目标选当前中继器排序对象选择数据集里的“订单金额”顺序选“降序”。预览之后点一下列标题列表就会立刻按金额从高到低重新排列。这里有一个关键经验如果是同一个字段第一次点降序、再点一次想改成升序直接再“添加排序”不会达到效果。Axure 的排序是可以叠加的旧排序不清空会出现按多个字段同时排序的情况。正确做法是点列标题时先执行一次“移除排序”再执行“添加排序”。如果你只是做一个点击切换排序每个列标题里都要写这两步。2.4 下拉框实现状态数据切换除了排序列表数据的“切换”还经常指按条件过滤。比如顶部放一个下拉框选项是“全部订单 / 待处理 / 已完成”选中某类订单后列表只显示这一类数据。这个用中继器的“添加筛选”做就行。给下拉框加“选中时改变”交互选中“全部订单”时先“移除筛选”确保之前的状态条件被清掉选中“待处理”时先“移除筛选”再“添加筛选”条件设置为中继器项的“订单状态”等于“待处理”。注意这里顺序很重要一定是先清后加否则多个筛选条件会叠加成交集列表最终可能显示为空。筛选完成后如果列表下方有分页器还要同步重新计算总页数把当前页变量恢复到合适位置。这也是为什么我会把筛选和分页联动起来而不是两个模块各做各的。3. 分页器动态加载的完整实现筛选切页而不是删行这一章是整个文章的核心。我做中继器分页的时候最开始的思路和很多人一样想着“点下一页就把当前页之外的行全部删掉”。后来发现这是一个非常糟糕的做法因为删行会直接破坏中继器的数据源。所以下面我会先讲清楚分页的核心原理再一步步拆解具体的变量设计、交互配置和页码联动。3.1 核心思路用“筛选”代替“删除行”最开始做分页我的第一反应是点下一页时把中继器里不是当前页的数据行删掉。后来很快发现这是给埋雷删除行是直接改数据源删完当前页是清爽了但再想切回去就麻烦还得重新添加行数据多的时候性能也糟心。后来我换了个思路永远保留完整数据用“添加筛选”来切出当前页应该显示的那几条。具体逻辑是这样的给数据集里的每一行都维护一个“编号”列连续编号1、2、3……假设每页显示5条。第一页就是编号1-5的数据第二页就是6-10第三页就是11-15。切换页码时只需要做两件事更新当前页码变量然后对中继器重新设置一个编号范围的筛选条件。数据没有被删除所有行都还在中继器数据源里所以随时可以切回去。3.2 变量设计与分页器界面布局在动手写交互之前先定义几个全局变量和一些控件的命名规范。这个习惯非常重要后面所有交互都要引用这些名字。我这里用四个变量page当前页码初始值为1pageSize每页显示条数初始值我设为5totalCount数据总条数初始值就填你数据集里实际数据的条数totalPage总页数可以在需要时用[[Math.ceil(totalCount/pageSize)]]计算得到。分页器放在列表下方从左到右按常规习惯摆放上一页按钮、页码按钮区、下一页按钮、页码信息文本。页码信息文本可以显示成“第[[page]]/[[totalPage]]页”这样的格式。需要注意[[page]]这种写法在 Axure 文本框里是可以直接引用的全局变量预览时它会自动替换成变量当前值。3.3 让中继器只在第一页加载时显示5条接下来要让中继器一开始就只显示第一页。怎么触发呢选中中继器在交互面板里找到“加载时”事件这是中继器组件加载时触发的事件。添加动作分两步第一步“添加排序”目标设为当前中继器排序字段选择“编号”升序第二步“添加筛选”条件区域打开筛选生成器设置两个条件——“编号大于或等于[[(page-1)*pageSize1]]”和“编号小于或等于[[page*pageSize]]”匹配方式选“全部”。为什么要在加载时就做这一步因为如果不设置中继器默认会把所有行全部显示出来那就没有分页效果了。用一个公式来说明第一页 startRow (1-1)51 1endRow 15 5。所以第一页过滤出的就是编号1-5的数据。第二页 startRow (2-1)51 6endRow 25 10。公式很简单核心就是任何一页的起始编号 (当前页-1) * 每页条数 1结束编号 当前页 * 每页条数。3.4 上一页和下一页的交互逻辑选中“上一页”按钮添加“鼠标单击时”事件设置条件判断page 1。在条件满足时执行三步设置全局变量page的值为[[page-1]]对中继器先执行“移除筛选”再执行“添加筛选”添加的筛选条件跟 3.3 节完全一样最后设置页码信息文本以及后续要讲到的页码高亮状态。用同样的思路处理“下一页”条件判断page totalPage条件满足时把page设置为[[page1]]然后同样先移除筛选再添加筛选。注意到没有分页筛选的公式始终不变变的只是page变量。这就是把数据模型封装成统一公式的好处交互再多核心只有一套逻辑。再补充一个细节上一页/下一页的禁用状态也要联动。选中“上一页”按钮在“鼠标单击时”之外再加一个交互当page 1时“禁用”这个按钮当page 1时“启用”它。下一页的禁用条件就是page totalPage。这样用户体验才完整。3.5 页码按钮的动态联动与高亮页码按钮这块先讲最直观的方案适合总页数不多的情况直接铺5个按钮文本分别写死为1、2、3、4、5。每个按钮的“鼠标单击时”事件就是设置page等于按钮上显示的数字然后做和上一页一样的“移除筛选 添加筛选”动作。如果想让页码按钮在高保真原型里更接近真实系统就需要让当前页码高亮。我给每个页码按钮都设置一个“选中”样式比如选中时背景色变成深色、文字变白。然后再给每个按钮单独做条件判断当page等于这个按钮代表的页码时设置这个按钮为选中状态其余按钮取消选中。可能有些繁琐但这是原型中最能打动客户的一个细节。数据量超过5页的话还需要加一组“页码区间”逻辑维护一个开始页码变量点击第一组页码的“下一页”时把开始页码加5。我在项目里一般会做个简化版本加一个“更多”按钮点击时全部页码统一加5或者减5。这样既避免过度设计又比永远停留在1-5页更像真实分页器。4. 实操中踩过的坑中继器分页常见问题排查技术方案讲再多实际动手的时候该踩坑还是会踩坑。这一章我把自己在多个项目里真实遇到的问题整理出来每一条都是一次血泪教训基本覆盖了中继器分页最常见的故障点。4.1 筛选条件被叠加数据越来越少这是中继器分页里最经典的问题。很多人在切换页码时只加了“添加筛选”忘了在添加之前执行“移除筛选”。Axure 的筛选条件和排序条件一样可以叠加。第一次点击下一页筛选条件变成“编号1-5”第二次点击下一页如果没有清掉旧条件就变成“编号1-5 且 编号6-10”交集为空列表直接变成白板。所以我的习惯是所有执行“添加筛选”的地方前面都必须先写一条“移除筛选”养成肌肉记忆。虽然看起来多一步但能避免不知道从哪冒出来的离奇 Bug。4.2 数据集编号类型不统一导致分页错乱如果你在数据集里把“编号”这一列设置成了文本而且录入了1、2、3……10、11这样的值那筛选时可能会出问题。因为文本列的比较会按字符规则来“10”会排在“2”前面筛选“编号10且编号15”时结果可能完全不是你想要的。解决办法是在数据集里尽量把编号列的“类型”设置为数字类型。如果 Axure RP9 数据集列没有明显的类型下拉框建议在录入时不要输入任何多余字符全部用半角数字。另外条件生成器里比较编号时右侧值也保持纯数字不要手动加引号。类型一致性是分页不出错的前提。4.3 删除行后页码越界、总数没同步如果原型里还加了“删除行”操作比如每行放一个删除按钮点完删掉当前行这里有个容易忽略的连环坑totalCount没有同步减少会导致总页数虚高当前页范围内的数据全部被删完会导致这一页显示空白。正确做法是删除行时把totalCount变量同步减1然后重新计算totalPage判断当前page是否超过新的totalPage超过了就回退到totalPage。更保险的做法是删除后把中继器重新筛选一次保证当前页条件仍然成立。这类交互虽然代码量不大但在原型里逻辑链条比较长最好是集中维护一套“刷新分页”的公共动作凡是有增删数据的地方都调用一遍。4.4 按钮禁用状态不刷新上一页/下一页的禁用逻辑如果写在“页面加载时”或者中继器“加载时”那么在初始状态没有任何问题但一旦用户点了几次翻页禁用状态就可能和实际页码对不上了。原因很简单禁用判断只在加载时执行了一次page变量变化后没有再触发。解决办法把禁用状态的判断直接写在每个翻页动作里或者写在页码按钮变动的同一个事件中。比如点击“下一页”时先改page变量、改筛选、更新页码信息然后再统一执行一次“更新按钮状态”的判断动作。这样每一步操作带来的状态变化都在同一个触发器里完成。4.5 快速问题排查速查表问题现象可能原因排查建议页码点了没反应page变量或筛选公式写错检查是否所有“添加筛选”前都有“移除筛选”检查公式括号列表显示空白筛选条件被叠加或编号类型不一致先移除所有筛选再看是否恢复检查数据集编号列类型页码信息显示不正确totalPage 未关联变量更新确认“第 [[page]] / [[totalPage]] 页”文本用了变量排序后再翻页顺序混乱分页靠编号筛选但排序字段未复位翻页时保证中继器已经按编号升序排列再把当前页筛选条件套上去点击列标题排序后分页错乱排序叠加导致编号顺序变化在排序切换前先移除排序并优先顺序移除排序、移除筛选、重新添加筛选条件5. 从“能用”到“好用”搜索、批量删除与模板化扩展分页器做到能翻页只能算完成了一半。真实项目里的列表页还有一大堆关联功能等着你去处理比如搜索、批量删除、勾选状态。把这些功能继续往中继器上叠加之后你会发现只要数据模型和变量规则没变多复杂的功能都能往这套框架里塞。5.1 搜索框与分页筛选的叠加列表页一般离不开搜索。搜索框联动分页的做法本质就是让“添加筛选”多一条条件而已。比如输入关键字搜索“客户姓名”触发条件是输入框的“文本改变时”。交互步骤先移除筛选再添加筛选设置两个条件并存——“客户姓名包含关键字变量”和“编号在 (page-1)pageSize1 到 pagepageSize 之间”匹配方式选“全部”。注意这里有个细节搜索结果的条数可能远小于原来的总条数如果搜索之后还把page停在原值可能直接落到一个空白页。所以搜索触发时我会把page强制重置为1再重新计算totalPage。搜索和分页虽然是两个功能但它们共享了同一条筛选通道只要把总条数、当前页这两个变量理顺联动起来就很简单。5.2 批量删除、勾选状态与分页刷新中继器行内放个复选框勾选状态也可以落到中继器的数据集里。方法是在数据集中加一个“是否选中”列值用0或1。在复选框的“选中时改变”事件里用“更新行”把当前行的“是否选中”改为1。底部放一个“批量删除”按钮点击时用“删除行”条件设置为“是否选中 等于 1”删除后再执行一遍分页刷新动作。这个场景正好呼应了 4.3 节的坑批量删除后totalCount要同步改page要检查越界中继器要重新筛选。把这些动作抽成一个分支你会发现所有增删改查的交互都变得统一了。5.3 把常见的分页组件沉淀成模板这套玩法做过一两次以后我越来越建议把“中继器 分页器”整体保存成 Axure 母版或者直接在团队组件库里沉淀一套。命名必须规范我用的是中继器统一叫rptList上一页btnPrev、下一页btnNext页码按钮btnPage1到btnPage5变量统一叫page/pageSize/totalCount/totalPage。这样换人维护、换项目复用都几乎没有学习成本。模板化还有一个额外好处当你发现分页逻辑有 Bug 时只需要改一个母版所有引用它的页面都同时修正不用复制粘贴几十份。这一点在多人协作的团队里特别重要。最后再说一点个人体会。中继器分页这个功能本质上不难难的是很多人一开始会把后端的分页思路套到原型里——总觉得要“真的只加载当前页的数据”于是整天纠结于删行、加行、存数据。实际做原型重要的是把交互演清楚。用筛选切页再配合一个辅助编号列数据完整、逻辑简单、预览效果还和真实系统几乎没区别。这套方法我也是踩了不少坑才沉淀出来希望这篇文章能帮你少走点弯路。如果你在自己项目里遇到了别的奇怪问题欢迎顺着这个思路排查一遍大概率都能找到答案。