Axure中继器进阶指南:打造专业级交互

简介: Axure中继器进阶指南:打造专业级交互

中继器进阶篇

前言

经过了基础篇的学习,我们已经掌握了中继器的基本操作,接下来来解锁中继器的进阶操作。

1. 修改删除指定行

首先拖入中继器,加上【修改】 【删除】的按钮,然后给修改按钮添加单击事件选择【更新行】

这里可以看到我们在中继器内部添加的事件,在编辑的时候【行】的版块多了一个【当前】的选项。

选择【当前】行修改后 axure 会自动帮我们匹配到这个事件对应的元件的所在行,并修改对应行的数据。

image.png

同样的方法,我们也可以给删除按钮添加单击事件选择【删除行】,选择【当前】选项,axure也会帮我们自动匹配删除的对应数据 image.png

2. 批量删除

在日常生活中,我们很常见批量的操作,这里如果我想批量删除的话中继器也是可以做得到的。

我们先在标题前加一个全选的复选框,在中继器里面加上一个复选框,最后加上一个【批量删除】的按钮

image.png

首先给标题前的全选复选框添加【选中】 【取消选中】的两个事件,当选中时控制中继器内的复选框也选中,取消选中时也控制中继器内的复选框取消选中。

image.png

然后给中继器内的复选框添加【选中】 【取消选中】的事件,当选中时标记当前行,取消选中时取消标记当前行

image.png

最后设置一下【批量删除】按钮的事件,【点击事件】 【删除标记行】

image.png

这样就可以实现批量删除的操作了

3.排序

axure提供了一个极为便捷的排序机制,允许我们直接进行数据的排序操作,我们添加一个【排序】的按钮,给它添加【单击事件】 【添加排序】,这里允许我们在【排序类型】选择不同的方式排序。

image.png

4.分页

当我们处理包含大量条目的列表时,通常会避免一次性将所有数据呈现给用户。

这样做主要是为了提升用户体验和系统性能,这里可以使用分页技术来呈现。

axure也提供基础的分页功能。

多添加几条数据,再增加【分页】 【上一页】 【下一页】的按钮待会操作

image.png

现在我们来做一个简单的分页功能,我们给按钮添加点击事件【设置每页项目数量】

image.png

保存之后再进入点击【分页】按钮后,页面上之剩下5条数据,另外5条数据则放在了第二页

这个时候我们就可以通过中继器的另一个事件来读取第二页或者后面页的数据,

我们刚刚放的【上一页】 【下一页】按钮在此刻就有用啦,给按钮分别设置上,【单击】【设置当前显示页面】选择【上一页/下一页】就好了

image.png

image.png

除此之外,当我们想做一个有页码的分页的时候,可以利用【设置当前显示页面】里面的【值】去实现这一功能,可以自己探索哦 image.png

5 .增(函数方式)

我们可以去尝试实现,用函数的方式去添加一条信息进我们的中继器了。

首先拖一个添加按钮再制作一个添加所需要的数据页面。

image.png

首先把我们的添加页面隐藏起来,再给【添加】按钮设置【单击】 【显示/隐藏的事件】来控制添加页面的显示

image.png

之后再给添加页面的【确认】按钮添加【单击】事件,当点击确认按钮时隐藏这个添加页面,并向中继器中添加一行数据

image.png

点击【添加行】这里我们采用函数的方式,首先是自动生成的【序号】---num

这里首先将中继器作为了局部变量(我直接用中继器的item不行,不知道为啥)Item.Repeater.dataCount的意思就是统计当前中继器的数据总数,无论是否筛选,对统计结果都没有影响,这样来达到数据总数+1去生成我们新的序号。

image.png

第二个就是获取文本框内的文字去作为我们中继器的【name】这个字段的数据,这里添加文本框为局部变量,再通过 .text 去获取文本框内的文本就行了

image.png

最后一个就是下拉框的性别来作为我们中继器的【sex】这个字段的数据,同上原理,将下拉框作为局部变量,获取下拉框选中的文字就行了 image.png

6.修改(函数方式)

再添加一个修改的页面,把我们的修改按钮用起来,也是先隐藏起来,再给【修改】按钮添加【点击】 【显示/隐藏】的事件去控制修改页面的显示。

image.png

这里需要注意一个点就是,当我们点击【修改】按钮出现修改信息的界面的时候文本框和下拉框的是当前行的内容,而不是空白,所以我们还需要再对【修改】按钮添加一些事件。

image.png

设置文本框内的文本为当前行的【num】这个字段的数据,对下拉框的设置是将选项【设置为】【值】【值】为当前行【sex】这个字段的数据

image.png

image.png

还要注意的是为了避免改一行数据时修改多行数据,所以需要【取消标记】 【中继器的所有行】,再【标记行】标记中继器的当前行。

这里标记当前行的原因是因为,当我们【修改行】的时候有一个【行】 【已标记】的选项,请往后看哦

image.png

接下来最后一步就是给修改页面的【确认】按钮设置事件了,点击后【隐藏】修改页面,再【更新行】选择中继器行的【已标记】

之后添加列选择对应的列字段把元件上的文本通过函数的方式赋值给它就好了



image.png

相关文章
|
18天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
62 4
|
30天前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
2月前
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
Axure中继器教程及案例详解
|
3月前
|
安全 JavaScript 数据可视化
Axure高端交互元件库:助力产品与设计
为了在这个竞争激烈的市场中脱颖而出,设计师和产品开发团队需要依赖强大的工具来创造引人注目且功能丰富的交互界面。下面介绍一款Axure精心制作的"Web高端交互元件库",作为一款高端交互元件库已被很多设计者使用,它成为了产品与设计团队不可或缺的得力助手。
117 2
|
3月前
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。
|
3月前
|
JSON 数据格式
【Axure高手秘籍】掌握这招,让你的原型设计效率飙升!——元件库导入与使用教程及主流资源下载全解析
【8月更文挑战第20天】Axure RP是界面设计与交互原型制作的强大工具。掌握元件库能显著提升设计效率。元件库包含预设UI元素如按钮、表单等,可直接拖放构建布局。在Axure RP中,通过“元件”选项下的“库”可访问并导入新元件库。导入后,轻松拖放元件至画布调整,甚至自定义样式和交互。利用脚本还能模拟真实交互效果,如按钮点击反馈。推荐资源包括Axure Marketplace、UIZilla等,助力高效设计。
86 0
|
3月前
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
76 0
|
5月前
|
Swift
技术好文共享:第七章美化DetailView界面
技术好文共享:第七章美化DetailView界面
|
6月前
|
UED 容器
产品入门第五讲:Axure交互和情境
产品入门第五讲:Axure交互和情境
|
6月前
|
传感器
LabVIEW开发气动悬浮系统教学平台
LabVIEW开发气动悬浮系统教学平台
32 1
下一篇
无影云桌面