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

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

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



相关文章
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
Web App开发 移动开发 监控
confluence协同编辑问题处理
confluence协同编辑BUG查询
1307 0
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
592 2
|
7月前
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
585 8
|
5月前
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1244 137
|
11月前
Axure设计之文本编辑器制作教程
本文介绍如何在Axure中模拟Web端富文本编辑器,实现基本的文本编辑功能,包括自定义字体样式、大小、颜色及对齐方式等。通过拖入矩形、文本域等元件,添加单选框和图标,并设置相应的交互,完成文本编辑器的制作。
365 2
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
334 6
Axure中继器教程及案例详解
|
11月前
|
存储 JavaScript 前端开发
Axure设计之日期时间范围选择器
在产品设计和原型制作中,日期时间范围选择器是常见需求。本文介绍如何使用Axure的动态面板、中继器、文本框、按钮及时间函数,快速制作一个功能完备的日期时间范围选择器。详细步骤包括创建基本框架、设置时间函数、载入时获取当前时间、添加时间选择功能、更新文本框值和验证格式化。通过这些步骤,你可以在Axure中轻松实现这一功能。
1169 0
Axure设计之单选框教程(中继器)
在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。
339 1
Axure设计之单选框教程(中继器)
|
开发者 人工智能 自然语言处理
欢迎使用通义灵码
灵码使用指南!一键收藏。
134792 31