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

相关文章
|
定位技术
百度地图缩放级别与比例尺的关系
百度地图缩放级别与比例尺的关系
1339 0
|
移动开发 小程序 前端开发
|
1月前
|
搜索推荐 数据可视化 数据库
用Python轻松打造专业PPT:自动化生成演示文稿全攻略
本文介绍如何用Python的python-pptx库自动化生成PPT,涵盖环境搭建、文本、图片、图表插入,以及批量生成与模板应用技巧。通过代码高效创建格式统一、内容丰富的演示文稿,大幅提升职场效率,适合报告、教学等场景,让PPT制作从繁琐变为智能。
805 1
|
9月前
|
人工智能 JavaScript 程序员
手把手带你上手通义灵码 2.0,体验 AI 程序员加持下的智能编码助手
手把手带你上手通义灵码 2.0,体验 AI 程序员加持下的智能编码助手
|
4月前
|
前端开发 JavaScript 网络架构
约定式路由生成神器:vite-plugin-pages
这篇文章介绍了如何使用vite-plugin-pages插件在Vite项目中实现约定式路由自动生成,包括搭建工程、安装插件、配置vite.config.ts文件以及创建和挂载路由。
355 0
|
5月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习模型、算法与应用的全方位解析
深度学习,作为人工智能(AI)的一个重要分支,已经在多个领域产生了革命性的影响。从图像识别到自然语言处理,从语音识别到自动驾驶,深度学习无处不在。本篇博客将深入探讨深度学习的模型、算法及其在各个领域的应用。
1018 3
|
9月前
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
857 8
|
监控 安全 Serverless
"揭秘D2终端大会热点技术:Serverless架构最佳实践全解析,让你的开发效率翻倍,迈向技术新高峰!"
【10月更文挑战第23天】D2终端大会汇聚了众多前沿技术,其中Serverless架构备受瞩目。它让开发者无需关注服务器管理,专注于业务逻辑,提高开发效率。本文介绍了选择合适平台、设计合理函数架构、优化性能及安全监控的最佳实践,助力开发者充分挖掘Serverless潜力,推动技术发展。
446 1
产品入门第六讲:Axure中继器
产品入门第六讲:Axure中继器
316 0
|
测试技术 语音技术 Android开发
起飞,纯本地实时语音转文字!
起飞,纯本地实时语音转文字!
652 3