Axure RP9 利用中继器实现列表数据的切换,分页器数据的动态交互加载

Axure RP9 --利用中继器制作动态分页

在原型制作中,如何实现分页数据的动态加载、分页与数据的交互,每页显示条数的设定。下面通过制作五年级一班成绩单分页列表,分享给大家,适合有一定axure使用基础的人员,如有更好的方案,请多多指教。
原型下载地址:https://download.csdn.net/download/shandongmike/20704338?spm=1001.2014.3001.5503

最终效果图:在这里插入图片描述

步骤1:首先利用中继器画出成绩单列表,并绑定成绩单数据。

在这里插入图片描述

步骤2:画出每页显示条数控制下拉框,利用中继器画出分页组件

在这里插入图片描述

步骤3:新增全局标量maxpage(显示的最多页码),minpage(显示的最小页码),i(循环计数),j(最循环数),selectpage(当前选中的页码)

在这里插入图片描述

步骤4:新增“重置分页数据按钮”,“重置分页数据按钮1”,用来重置分组组件中对应中继器的数据。添加对应的数据点击交互事件,用来循环添加分页组件显示的页码。

在这里插入图片描述
在这里插入图片描述

步骤5:给“每页显示条数”下拉框添加选项改变事件,用来修改成绩的中继器每页显示的数据条数、重新设定最多页码,触发重新加载分页组件数据,重置当前选中页码为1.

在这里插入图片描述

步骤6:进入分页组件中继器,为分页数值lable添加选中与鼠标悬停时的交互样式

在这里插入图片描述

在这里插入图片描述

步骤7:为分页数值lable添加数据点击交互事件

在这里插入图片描述

步骤8:为上一个按钮添加鼠标点击交互事件

在这里插入图片描述

步骤9:为下一个按钮添加鼠标点击交互事件

在这里插入图片描述

步骤10:隐藏“重置分页数据按钮”,“重置分页数据按钮1”,然后运行预览。

在这里插入图片描述

预览结果

在这里插入图片描述
原型地址:https://download.csdn.net/download/shandongmike/20704338?spm=1001.2014.3001.5503

  • 3
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Axure RP 9中的中继器是一种非常有用的功能,可以帮助我们快速和轻松地进行表格查询搜索。中继器可以将表格数据和搜索输入进行匹配,然后返回匹配结果。以下是使用Axure RP 9中的中继器进行表格查询搜索的步骤: 1. 准备数据:首先,我们需要有一个包含要搜索的数据的表格。可以在Axure RP 9中创建一个表格,然后填充数据。确保表格的每一列都包含了需要搜索的内容。 2. 创建中继器:在Axure RP 9的“交互”选项卡中,可以找到中继器功能。点击“中继器”按钮,然后在弹出的对话框中选择要使用的表格。Axure RP 9会根据表格的列头自动创建一个中继器。 3. 配置搜索字段:在中继器的配置界面,可以选择想要进行搜索的字段,并设置搜索的匹配条件。例如,可以选择在用户名字段中搜索包含特定关键词的数据。 4. 设计搜索界面:在Axure RP 9的页面上,可以创建一个搜索输入框和搜索按钮,并将其与中继器进行关联。当用户输入搜索关键词并点击搜索按钮时,中继器将会根据配置的搜索条件进行匹配,并返回匹配结果。 5. 显示搜索结果:在Axure RP 9中,可以使用动态面板、数据列表或重复区域等组件来展示搜索结果。根据中继器返回的匹配数据,我们可以在页面上展示查询到的数据。 通过使用Axure RP 9中的中继器-表格查询搜索功能,我们可以轻松地创建一个交互式的搜索功能,帮助用户快速找到他们需要的信息。无论是构建网页设计还是应用原型,这种功能都是非常实用的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值