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 中的核心组件之一,不仅极大地提升了原型设计的效率,也为交互设计带来了无限的可能性。

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

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



相关文章
|
2月前
|
安全 JavaScript 数据可视化
Axure高端交互元件库:助力产品与设计
为了在这个竞争激烈的市场中脱颖而出,设计师和产品开发团队需要依赖强大的工具来创造引人注目且功能丰富的交互界面。下面介绍一款Axure精心制作的"Web高端交互元件库",作为一款高端交互元件库已被很多设计者使用,它成为了产品与设计团队不可或缺的得力助手。
|
2月前
|
UED
Axure中继器进阶指南:打造专业级交互
Axure中继器进阶指南:打造专业级交互
37 0
|
4月前
|
Swift
技术好文共享:第七章美化DetailView界面
技术好文共享:第七章美化DetailView界面
|
5月前
|
UED 容器
产品入门第五讲:Axure交互和情境
产品入门第五讲:Axure交互和情境
|
前端开发 JavaScript
前端代码分享——星空背景特效(内含源码)
前端代码分享——星空背景特效(内含源码)
|
编解码
是时候展示给大家这5款压箱底的软件了
是时候把自己压箱底的软件都发出来了,软件都是小巧耐用,不带广告的,赶紧下载起来吧!就算暂时用不到的,也可以收藏起来等需要的时候再来下载!
136 6
是时候展示给大家这5款压箱底的软件了
|
数据可视化 定位技术 UED
「联系我们」页面设计指南(内附案例)
「联系我们」页面就是用户联系你的重要渠道,是网站寻求优秀合作伙伴的途径
2114 0
「联系我们」页面设计指南(内附案例)
|
数据可视化 搜索推荐 API
如何在 FlowUs、Notion笔记软件使用白板和代码绘制流程图(二)
关于如何在 FlowUs 这样的效率工具中如何使用流程图的话题,上次我们在文章中推荐了 ProcessOn 和 Draw.io 这两款工具。具体可以阅读原文。 除了专门的流程图工具,还有其他解决方案吗? 1. 使用白板工具绘制流程图或者思维导图。 2. 使用代码绘制流程图
612 0
|
Java 大数据
推荐一个在线创作流程图、思维导图软件—ProcessOn
最近要画流程图,破解了半天Visio2016没搞定,2016的估计都被封了,Visio收费又过贵,又不想折腾低版本的破解,所以找了个在线画图平台ProcessOn,没想到还出乎人意料,完全可以达到预期效果,而且比较轻量级,虽然没有提供客户端,但个人觉得已经很棒了。
2924 0