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

使用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+组件的飞跃

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912550.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

清华大学提出Mini-Omni2:开源多模态模型,功能与GPT-4o媲美!

🌐 在人工智能领域,多模态模型的发展正如火如荼。今天,我们要介绍的是由清华大学提出的Mini-Omni2,这是一个开源的多模态语言模型,它在功能上与GPT-4o相媲美,能够理解和生成视觉、听觉和文本内容&#xff0…

Diffusion Policy——斯坦福刷盘机器人UMI所用的扩散策略(含Diff-Control、ControlNet详解)

前言 本文一开始是属于此文《UMI——斯坦福刷盘机器人:从手持夹持器到动作预测Diffusion Policy(含代码解读)》的第三部分,考虑后Diffusion Policy的重要性很高,加之后续还有一系列基于其的改进工作 故独立成本文,且把原属于另一…

AI 写作(五)核心技术之文本摘要:分类与应用(5/10)

一、文本摘要:AI 写作的关键技术 文本摘要在 AI 写作中扮演着至关重要的角色。在当今信息爆炸的时代,人们每天都被大量的文本信息所包围,如何快速有效地获取关键信息成为了一个迫切的需求。文本摘要技术正是为了解决这个问题而诞生的&#x…

一个怀旧,俺的第一个共享软件

今天网友说起了 福彩双色球的程序。俺就想起这个来了,这是俺的第一个共享软件,收入大约15000。在当时来说,速度算是最快的。有些地方用了汇编优化(题外话,最近俺看到新闻,FFmpeg的作者也用汇编优化 性能提升…

【Agent综述】Agent在多模态交互的应用

note 这个工作收集了多模态游戏、机器人和医疗等领域的数据集,包括Minecraft视频数据、虚拟家庭环境数据和医疗图像数据。利用LLMs和VLMs作为智能体,特别是在游戏、机器人技术和医疗保健等领域这篇论文提出了一种新的Agent AI框架,通过结合大…

Kafka - 启用安全通信和认证机制_SSL + SASL

文章目录 官方资料概述制作kakfa证书1.1 openssl 生成CA1.2 生成server端秘钥对以及证书仓库1.3 CA 签名证书1.4 服务端秘钥库导入签名证书以及CA根证书1.5 生成服务端信任库并导入CA根数据1.6 生成客户端信任库并导入CA根证书 2 配置zookeeper SASL认证2.1 编写zk_server_jass…

STM32H503开发(1)----开发板测试

STM32H503开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载产品特性参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32H503 & SENSOR是一款基于STM32H5系列微控制器的评估套件。该微控制器采用了40nm工艺制造,具有更…

3.1 > Shell

本节概览 在 上一节 中我们了解了 Linux 的桌面环境,包括 GUI 、 TTY 和 VNC 等的介绍和使用。在本节中将介绍 Shell 是个什么东西,我们到底是如何通过 Shell 来操作计算机的,以及一些常见的 Shell 版本有哪些和它们有什么特点。 目录 本节…

C++ -- 多态与虚函数

多态 概念 多态(polymorphishm):通常来说,就是指事物的多种形态。在C中,多态可分为编译时多态(静态多态)和运行时多态(动态多态),这里我们重点讲的是运行时多…

利用游戏引擎的优势

大家好,我是小蜗牛。 在当今快速发展的游戏产业中,选择合适的游戏引擎对开发者来说至关重要。Cocos Creator作为一款功能强大且灵活的游戏引擎,为开发者提供了丰富的工具和资源,使他们能够高效地开发出优秀的游戏。本文将探讨如何…

uniapp配置h5路由模式为history时404

为了不让URL中出现#,让uniapp项目配置h5路由模式为hisory 然而本地好好的,放到服务器上却404了。 解决方法是给nginx配置一个伪静态: location /xxx-html/ {alias /home/nginx_web/xxx_new_html/;try_files $uri $uri/ /xxx-html/index.ht…

架构师备考-概念背诵(软件工程)

软件工程 软件开发生命周期: 软件定义时期:包括可行性研究和详细需求分析过程,任务是确定软件开发工程必须完成的总目标,具体可分成问题定义、可行性研究、需求分析等。软件开发时期:就是软件的设计与实现,可分成概要设计、详细设计、编码、测试等。软件运行和维护:就是…

小白docker入门简介

Dockerfile入门使用分享 一、docker是啥二、镜像仓库三、自定义镜像四、动手做机甲玩偶五、帮我做数学题六、计算功能的写法七、咒语翻译器八、放屁九、解决问题 一、docker是啥 最开始我和你一样,围着镜像、容器、docker的名词团团转,其实没那么复杂。…

一文学习Android中的Property

在 Android 系统中,Property 是一种全局的键值对存储系统,允许不同组件和进程间以轻量级的方式进行数据传递。它主要用于系统配置、状态标识等场景,使得不同进程能够通过属性的设置或获取来通信。property 的核心特性是快速、高效&#xff0…

node.js安装配置(Windows)

1、下载 CNPM Binaries Mirror 2、安装 3、验证 win R 进入cmd 4、配置环境变量 4.1、创建两个文件夹 4.2、安装目录进入cmd(配置全局属性) 配置两个命令: npm config set prefix "D:\liyunqing\nodejs\node_global"npm config set cache "D:\l…

mp3格式音频怎么做成二维码?扫码获取音频文件的制作方法

随着二维码的广泛使用,现在很多内容都会通过生成二维码的方式来传输内容,通过这种方式可以更快捷的实现内容分享,简化其他人获取内容的流程,有效提高效率。音频是目前常见的一种内容分享方式,比如录音、听力、音乐等类…

【css flex 多行均分有间隙布局】

小程序、web均可使用&#xff0c;我当前用的是小程序 <view class"job_tab_container flex_between"><view class"job_tab_item"></view><view class"job_tab_item"></view><view class"job_tab_item&qu…

单臂路由技术,eNSP实验讲解

单臂路由技术&#xff0c;eNSP实验讲解 一、简要介绍1、概念2、工作原理3、优点4、缺点5、应用场景举例 二、eNSP仿真实验1、步骤一&#xff1a;2、步骤二&#xff1a;3、步骤三&#xff1a;4、步骤四&#xff1a; 三、总结。 一、简要介绍 1、概念 单臂路由&#xff08;Rout…

微服务day03

导入黑马商城项目 创建Mysql服务 由于已有相关项目则要关闭DockerComponent中的已开启的项目 [rootserver02 ~]# docker compose down WARN[0000] /root/docker-compose.yml: version is obsolete [] Running 4/4✔ Container nginx Removed …

Mac如何实现最简单的随时监测实时运行状态的方法

Mac book有着不同于Windows的设计逻辑与交互设计&#xff0c;使得Mac book有着非常棒的使用体验&#xff0c;但是在Mac电脑的使用时间过长时&#xff0c;电脑也会出现响应速度变慢或应用程序崩溃的情况&#xff0c;当发生的时候却不知道什么原因导致的&#xff0c;想要查询电脑…