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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

七次课掌握 Photoshop:选区与抠图

Photoshop 是一门选择的艺术。Photoshop 提供了多种工具和方法来创建选区,适用于不同的场景和需求。 理解和熟练使用这些工具,是提高图像处理能力的关键。 ◆ ◆ ◆ 选区方法与操作 一、创建选区的工具和命令 1、选区工具 (1)选…

智慧商城项目-VUE2

实现效果 项目收获 通过本项目的练习,可以掌握以下内容: 创建项目 ##基本创建 基于 VueCli 自定义创建项目架子,并对相关的配置进行选择 vue create demo-shopping调整目录 删除文件 删除初始化的一些默认文件 src/assets/logo.pngsrc/components…

Java | Leetcode Java题解之第546题移除盒子

题目: 题解: class Solution {int[][][] dp;public int removeBoxes(int[] boxes) {int length boxes.length;dp new int[length][length][length];return calculatePoints(boxes, 0, length - 1, 0);}public int calculatePoints(int[] boxes, int l…

PDF多功能工具箱 PDF Shaper v14.6

如今对PDF处理的软件很多都是只是单一的功能。PDF Shaper给你完全不同的体验,因为PDF Shaper是一款免费的PDF工具集合的软件。有了PDF Shaper,你以后再也不用下载其他处理PDF的软件了。PDF Shaper的功能有:合并,分割,加…

论文阅读--捍卫基于激光雷达视野范围的三维目标检测

目前存在的问题: 常用的体素化或鸟瞰图(BEV)表示相比,范围视图表示更紧凑且没有量化误差,但其在目标检测方面的性能很大程度上落后于体素化或 BEV 。范围视图尺度变化的挑战2D 图像不同,虽然距离图像的卷积…

使用匿名管道时出现程序一直运行问题

父进程创建两个子进程,父子进程之间利用管道进行通信。要求能显示父进程、子进程各自的信息,体现通信效果。(源程序pipe_1.c) 一开始,我忘了初始化pipe,很傻*的直接把fd当管道使,出现了儿子喊爸爸"i am your father."的…

【笔记】开关电源变压器设计 - 工作磁通的选择原则

变压器设计中有一个重要的输入参数,是选定电路工作的磁路参数。涉及到磁场的上下震荡最高幅度。如上图所示。磁场的方向有正负,所以如果电流在越过零点震荡,只考虑半周来和Bs或者Bmax比对即可。Bs,Bmax与特定材料有关。材料给出的最大Bmax,或…

一文了解Android本地广播

在 Android 开发中,本地广播(Local Broadcast)是一种轻量级的通信机制,主要用于在同一应用进程内的不同组件之间传递消息,而无需通过系统的全局广播机制。这种方法既可以提高安全性(因为广播仅在应用内传播…

Spark本地模式安装

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 《Spark SQL大数据分析快速上手》【摘要 书评 试读】- 京东图书 大数据与数据分析_夏天又到了的博客-CSDN博客 Hadoop完全分布式环境搭建步骤-CSDN博客,前置环境安装参看此博文 Spark本地模式安装 Spark本地模式的安…

SpringSecurity6+OAuth2.0 从入门到熟练使用

文章目录 简介1、快速入门1.1 准备工作我们先要搭建一个SpringBoot工程① 创建工程 添加依赖② 创建启动类③ 创建Controller1.2 引入SpringSecurity2、 认证2.1 登录校验流程2.2 原理分析2.2.1 SpringSecurity完整流程2.2.2 认证流程详解概念速查:2.3 解决问题2.3.1 思路分析2…

计算机网络——SDN

分布式控制路由 集中式控制路由

自动驾驶革命:从特斯拉到百度,谁将主宰未来交通?

内容概要 自动驾驶技术正在经历一个前所未有的革命性变化,各大企业纷纷抢占这一充满潜力的新市场。以特斯拉和百度为代表的行业巨头,正利用各自的优势在这一技术的赛道上展开激烈竞争。特斯拉凭借其在电动汽车和自动驾驶领域的前瞻性设计与不断革新的技…

Group By、Having用法总结(常见踩雷点总结—SQL)

Group By、Having用法总结 目录 Group By、Having用法总结一、 GROUP BY 用法二、 HAVING 用法三、 GROUP BY 和 HAVING 的常见踩雷点3.1 GROUP BY 选择的列必须出现在 SELECT 中(🤣最重要的一点)3.2 HAVING 与 WHERE 的区别3.3 GROUP BY 可以…

MySQL存储目录与配置文件(ubunto下)

mysql的配置文件: 在这个目录下,直接cd /etc/mysql/mysql.conf.d mysql的储存目录: /var/lib/mysql Ubuntu版本号:

深度学习经典模型之Network in Network

1 Network in Network 1.1 模型介绍 ​ Network In Network (NIN)是由 M i n L i n Min Lin MinLin等人提出,在CIFAR-10和CIFAR-100分类任务中达到当时的最好水平,因其网络结构是由三个多层感知机堆叠而被成为NIN [ 5 ] ^{[5]} [5]。NIN以一种全新的角…

Java版ERP管理系统源码解析:利用Spring Cloud Alibaba和Spring Boot实现微服务架构

ERP系统,亦称为企业资源计划系统,是一种融合了企业多元部门和复杂业务的综合管理信息系统。在全球经济蓬勃发展及企业竞争日趋激烈的背景下,ERP系统已逐步跃升为现代企业管理的核心工具。该系统通过优化资源配置及提升业务流程效率&#xff0…

Python 基础笔记之生成器generator

生成斐波拉契数列 def fib(length):a,b0,1n0while n<length:yield aa,bb,abn1return abc g2fib(10) try:print(next(g2)) 生成器方法&#xff1a; __next__():获取下一个元素 send(value):向每次生成器调用中传值 注意&#xff1a;第一次调用send(None) def gen():i0while…

vscode翻译插件

vscode翻译插件 需求 &#xff1a; 在编写代码的时候&#xff0c; 打印或者定义变量的时候总是想不起来英文名称&#xff0c; 所有就开发了一款中文转换为英文的插件。 功能 1、目前支持选中中文&#xff0c;右键选择打印或者变量进行转换。 2、目前支持选中中文&#xff0…

美格智能5G车规级通信模组:高精度定位守护极致安全

物联网时代&#xff0c;众多应用和设备都需要位置相关服务&#xff0c;尤其是对移动场景而言&#xff0c;定位的需求更加重要。随着自动驾驶、高阶辅助驾驶等智能车载技术的高速发展&#xff0c;在智能车载领域的定位需求除基础的位置信息之外&#xff0c;还对信息获取的速度、…

SpringMVC学习记录(三)之响应数据

SpringMVC学习记录&#xff08;三&#xff09;之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…