Axure中继器实战篇:让数据展示和交互设计更上一层楼!

简介: Axure中继器实战篇:让数据展示和交互设计更上一层楼!

前言

经过了前两章的学习,接下来我们去模拟的实际场景开启实战篇,以下是界面

image.png image.png

1.前期准备

前期把页面准备好后,给中继器的每个单元格命名为了方便数据绑定的操作。

为了演示我准备了几十行数据,建议也多准备一点。

image.png

2.数据展示

这一步非常简单,只要给中继器添加【每项加载时】的事件,然后将各个中继器的值填入对应单元格就行了

image.png

但是,当我们绑定后数据显示时会自动展示所有的数据,这样看起来不太方便。

所以这里先需要做一个分页的操作。

【载入时】 【设置每页项目数量】,添加局部变量获取下拉框的值通过函数的方式设置每页显示的项目数量

image.png

当我们去修改每页显示项目数量的元件所选项时,对应的每页显示项目数量也应该发生改变,所以也添加【选项改变时】 【设置每页数量】,这样就ok了。

image.png

还有一个问题就是,当我们去改变每页显示项目数量的时候,我们的分页组件的位置理应发生改变。

所以还需要在【载入时】【选项改变时】去移动分页组件。

因为我的分页组件高60,再根据中继器的x轴位置和中继器的高+70(留10做空格)就行了。

这里可以看到【载入时】做了一个等待100ms的操作,因为当中继���和分页同时载入时,中继器数据如果没有加载完成会导致分页组件的摆放位置错误,所以等待一会儿👍🏻。

image.png

3.分页

接下来继续看看分页的操作

image.png

【第一页】 直接添加 【设置当前显示页面】 的事件,然后选择页面 【值】,页码填 【1】 就好了

image.png

【上一页】【下一页】【最后一页】 也很简单,且用的是相同的事件,【设置当前显示页面】 再在 【页面】 选择中选择对应的选项即可👍

image.png

之后再来看这个页码显示器,这个页码显示器不仅展示了总页数和当前页码,其实还可以提供了快速跳转至特定页面的功能,让我们一起来看看吧

image.png

首先可以在中继器数据载入的时候为这个文本框设置文本,显示的就是当前所在页和总共页数,中继器【每项加载】时去设置这个元件的文字。

这两个函数,前一个就是当前所在页,后面一个就是中继器总共的页数。

image.png

然后当我们去点击这一文本框的时候,使它的文本为空,所以添加事件【获取焦点时】 【设置文本】【" "】

当这个文本框失去焦点时也要恢复文本为"当前页/总共页数"的形式,所以添加事件【失去焦点时】 【设置文本】,函数就是上一步【每项加载】设置的函数。

image.png

这个元件在最后要实现我们输入数字,按回车,跳转中继器相应页数的功能。

添加事件 【按键按下时】 为中继器【设置当前显示页面】然后 【值】 就是文本框内我们输入的数字。

image.png

但光这样还不行,还需要添加情形:当回车键按下且元件内文字不为空时才触发刚刚我们添加的事件,到这里整个分页功能就完成了👍🏻

image.png

4.查询

查询功能比较好实现,我做了两个筛选条件来去区分不同的场景下的筛选。

image.png

a.当姓名不为空,年级选项为全部

b.当姓名为空,年级选项不为全部

c.当姓名不为空,年级选项不为全部

d.当姓名为空,年级选项为全部的时候移除筛选

a、b、c添加的筛选都是 搜索区域文本框的文本和下拉框的所选项,添加局部变量就行了

重置按钮很简单,点击之后移除中继器全部筛选再把文本框内文本设置为空和下拉框所选项设置为全部就行了。

image.png

5.增和改

准备好两个页面,一个新增一个修改

image.png

点击 【添加】 按钮,显示新增表单然后清空元件内的文字和回复下拉列表默认选项

image.png

新增表单的 【确认】 按钮添加 【单击】 【添加行】的事件,对应的把元件内的文字添加进行就好了,最后再隐藏新增表单。

image.png

中继器内的 【编辑】 添加 【单击】事件先显示修改表单,然后将表单内元件的文字内容设置为当前行的对应信息。

为了保险起见取消标记所有行再标记当前行。

修改表单的确认和新增表单的确认是一个道理,只是 【添加行】 变为了 【更新行】 ,然后还是把元件内的文字更新到中继器对应字段,最后隐藏修改表单就行了。

总结

通过本文的深入探讨,我们对 Axure中继器 的强大功能和应用场景有了全面的认识。

中继器作为 Axure 中的核心组件之一,不仅极大地提升了原型设计的效率,也为交互设计带来了无限的可能性。

最后,感谢每一位读者的陪伴和探索。

愿我们共同在交互设计的道路上不断前行,用我们的创造力和专业知识,为用户带来更加卓越的体验。



相关文章
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
301 1
|
3月前
|
安全 JavaScript 数据可视化
Axure高端交互元件库:助力产品与设计
为了在这个竞争激烈的市场中脱颖而出,设计师和产品开发团队需要依赖强大的工具来创造引人注目且功能丰富的交互界面。下面介绍一款Axure精心制作的"Web高端交互元件库",作为一款高端交互元件库已被很多设计者使用,它成为了产品与设计团队不可或缺的得力助手。
113 2
|
3月前
|
UED
Axure中继器进阶指南:打造专业级交互
Axure中继器进阶指南:打造专业级交互
40 0
|
5月前
|
Swift
技术好文共享:第七章美化DetailView界面
技术好文共享:第七章美化DetailView界面
|
6月前
|
UED 容器
产品入门第五讲:Axure交互和情境
产品入门第五讲:Axure交互和情境
|
6月前
产品入门第六讲:Axure中继器
产品入门第六讲:Axure中继器
|
6月前
|
前端开发 定位技术
前端知识笔记(十七)———地图多点标注功能
前端知识笔记(十七)———地图多点标注功能
147 1
[图文]微课设计零基础入门 | 6.微课教案的编写《用部首查字法查字典》
各位老师晚上好,昨天的图文教程,我们对微课的知识点进行了选择。上一节课中,我说了接下来要为大家演示的微课制作的知识点是《用部首查字法查字典》,那么今天这一节课,我一边分析,一边给大家帖出文字示例。
104 0
|
前端开发 JavaScript
前端代码分享——星空背景特效(内含源码)
前端代码分享——星空背景特效(内含源码)
|
存储 Java API
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
113 0