Axure设计之三级联动选择器教程(中继器)

devtools/2024/11/13 9:57:40/

使用Axure设计三级联动选择器(如省市区选择器)时,可以利用中继器的数据存储和动态交互功能来实现。下面介绍中继器三级联动选择器设计的教程:

一、效果展示:

1、在三级联动选择器中,首先选择省份,省份下拉列表中的选项会根据数据集自动填充;

2、当鼠标移动到省份选项后,城市下拉列表会自动更新,仅显示与该省份相关的城市;

3、进一步当鼠标移动到城市后,区县下拉列表会更新为仅显示所选城市的区县;

预览:https://fdsg8u.axshare.com

二、设计思路

1、利用中继器存储省、市、区三级数据,并通过数据集管理这些数据;

2、为省份、城市和区县分别设置选择器,作为用户交互的界面元素;

3、当下拉列表的选项改变时,触发交互事件,根据选中的选项动态更新其他下拉列表的内容;

4、通过中继器的筛选功能,实现根据选中项动态更新下拉列表的效果。

三、关键步骤

1、添加中继器并设置数据集:

从元件库中拖入中继器到画布上,分别命名省级选择中继器、市级选择中继器、区级选择中继器;

省级选择中继器包括code、value两列,市级/区级选择中继器包括code、value、pcode三列,code为省份编码(关联市级选项使用),value为显示名称,pcode为上级行政区划编码;

在数据集表格中,导入省份、城市、区县数据。

2、配置省份下拉列表的交互:

选中省份下拉列表,添加“鼠标移入时”的交互事件;

在交互事件中,使用筛选功能更新城市中继器的数据,只显示与选中省份对应的城市;

同时,清空或重置城市和区域下拉列表的选项。

3、配置城市下拉列表的交互:

选中城市下拉列表,添加“鼠标移入时”的交互事件;

在交互事件中,使用筛选功能更新区域中继器的数据,只显示与选中城市对应的区县;

同时,可以根据需要添加提示信息或验证逻辑。

4、配置区域下拉列表(可选):

如果区域下拉列表只是用于显示选中的区域名称,则无需添加复杂的交互逻辑;

可以简单地显示选中的区域名称,或根据需要添加其他交互效果。

5、优化界面和测试交互:

根据设计需求,调整下拉列表和中继器的布局和样式;

在不同的省份、城市和区县之间切换,确保三级联动选择器能够正确地显示和更新数据;

测试交互的流畅性和准确性,确保用户能够轻松完成省、市、区的选择。

通过以上步骤,你可以使用Axure RP中的中继器设计一个功能完善、交互流畅的三级联动选择器。这个选择器可以应用于各种需要地址选择的场景,如电商平台、数据筛选等。

关键词:axure 三级联动选择 省市区选择

 End·往期推荐

大屏可视化:舞动数据与美观的“设计秘籍”

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃


http://www.ppmy.cn/devtools/133322.html

相关文章

京东商品SKU信息的“窃听风云”:Python爬虫的幽默之旅

在这个信息爆炸的时代,我们就像是一群在数据海洋中寻找宝藏的海盗。今天,我们将化身为技术高超的“数据海盗”,用Python这把锋利的剑,去京东的宝库中精准地获取商品的SKU信息。准备好了吗?让我们开始这场幽默的冒险之旅…

SQLI LABS | Less-38 GET-Stacked Query Injection-String

关注这个靶场的其它相关笔记:SQLI LABS —— 靶场笔记合集-CSDN博客 0x01:过关流程 输入下面的链接进入靶场(如果你的地址和我不一样,按照你本地的环境来): http://localhost/sqli-labs/Less-38/ 从本关开…

单链表算法题(数据结构)

1. 反转链表 https://leetcode.cn/problems/reverse-linked-list/description/ 题目: 看到这个题目的时候我们怎么去想呢?如果我们反应快的话,应该可以想到我们可以从1遍历到5然后依次头插,但是其实我们还有更好的办法&#xff…

pytorch量化训练

训练时量化(Quantization-aware Training, QAT)是一种在模型训练过程中,通过模拟低精度量化效应来增强模型对量化操作的鲁棒性的技术。与后训练量化不同,QAT 允许模型在训练过程中考虑到量化引入的误差,从而在实际部署…

【NLP】使用 SpaCy、ollama 创建用于命名实体识别的合成数据集

命名实体识别 (NER) 是自然语言处理 (NLP) 中的一项重要任务,用于自动识别和分类文本中的实体,例如人物、位置、组织等。尽管它很重要,但手动注释大型数据集以进行 NER 既耗时又费钱。受本文 ( https://huggingface.co/blog/synthetic-data-s…

【C语言】分布式系统

描述一下你对分布式系统的理解,以及如何设计和实现一个分布式系统。 分布式系统是由多台独立计算机通过网络协同工作的集合,它们各自运行着完整的应用程序和数据库,并相互之间通过通信协议进行数据交换和协调任务。分布式系统的主要特性包括&…

(十三)JavaWeb后端开发——MySQL2

目录 1.DQL数据查询语言 1.1基本查询 1.2条件查询 where关键字 1.3分组查询 1.4排序查询 1.5分页查询 2.多表设计 3.多表查询——联查 4.多表查询——子查询​ 5.MySQL 事务 6.事务管理(事务进阶) 7.MySQL 索引 1.DQL数据查询语言 分为五大…

SpringBoot框架:共享汽车行业的技术革新

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了共享汽车管理系统的开发全过程。通过分析共享汽车管理系统管理的不足,创建了一个计算机管理共享汽车管理系统的方案。文章介绍了共享汽车管理系统的系…