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

news/2024/11/8 12:08:42 标签: 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.niftyadmin.cn/n/5743870.html

相关文章

JavaScript基础语法部分-黑马跟课笔记

一、Javascript介绍 1.JavaScript是什么? 1.是什么? 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果 2.作用(做什么?) 网页特效(监听用户的一些行为让网页做…

特定数据库的备份脚本

该脚本 mysql_backup.sh 是一个 MySQL 数据库的备份脚本,以下是它的工作原理和需要注意的细节: 脚本内容分析 1.设置时间变量 TIME : TIMEdate %F_%H-%M-%S该变量 TIME 存储当前日期和时间,格式为 YYYY-MM-DD_HH-MM-SS,用于生…

J2EE平台

J2EE(Java 2 Platform, Enterprise Edition)为构建复杂的企业级应用提供了全面的技术支持和规范标准。自从上世纪末推出以来,J2EE 已经成为企业信息系统(EIS)领域中不可或缺的一部分。它通过组件化、多层次的分布式应用…

【功能介绍】信创终端系统上各WPS版本的授权差异

原文链接:【功能介绍】信创终端系统上各WPS版本的授权差异 Hello,大家好啊!今天给大家带来一篇关于信创终端操作系统上WPS Office各版本(不包括政务版、企业版等)之间的差异的文章。WPS Office作为国内广泛使用的办公软…

C++ 线程初始化编译报错

这是一个很简单的开启一个线程, 用于演示一个线程和生命周期之间的错误,但是还没有把这个错误暴露出来, 就遇见了一个编译问题. 线程中执行指定逻辑的代码 线程的执行方法, 声明写在了ThreadRun.h 实现写在 ThreadRun.cpp中. class ThreadRun { public: void func(); };void T…

easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头

easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头 原版表头和表体字体美化自动拼接错误提示列自适应宽度自动合并单元格使用Easyexcel使用poi导出 在后台管理开发的工作中,离不开的就是导出excel了. 如果是简单的导出, 直接easyexce…

大数据治理:构建数据驱动的智能未来

一、引言 背景介绍 随着信息技术的快速发展和互联网的普及,大数据已经成为现代社会的重要资产。企业和组织通过收集和分析大量数据来优化决策、提高效率和创新能力。然而,数据的快速增长也带来了一系列挑战,如数据质量、数据安全和隐私保护等…

python在word中插入图片

本文讲解python如何在word文档中插入图片,以及指定插入图片的段落。 1、在新建的word文档中插入图片 import win32com.client as win32 from win32com.client import constants # 1)打开word应用程序 doc_app win32.gencache.EnsureDispatch(Word.App…