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

news/2024/11/8 3:07:32/

使用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/news/1545234.html

相关文章

QML----复制指定下标的ListModel数据

我现在有一个写好的listmodel,我需要从里边抽取35个数据作为展示 头文件 #ifndef GETONEPAGESIZEMEMBERLISTMODEL_H #define GETONEPAGESIZEMEMBERLISTMODEL_H#include <QObject> #include <QAbstractListModel> #include <QDebug> #include "mylistm…

七.numpy模块

NumPy(Numerical Python) 是 Python 语言的一个扩展程序库&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。 NumPy 的前身 Numeric 最早是由 Jim Hugunin 与其它协作者共同开发&#xff0c;2005 年&#xff0c;Travis Oliphant…

江西省技能培训平台(逆向破解登录国密SM2)

江西省技能培训平台(逆向破解登录) 登录破解(国密sm2加密方式) 请求接口 https://api.cloud.wozhipei.com/auth/user/v1/login 使用身份证和密码登录发现有password加密&#xff0c;好开始逆向js 全局搜索发现使用国密SM2进行加密 模拟算法 js 使用js进行模拟算法 <…

Java项目实战II基于Spring Boot的便利店信息管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在快节奏的…

基于C++的决策树C4.5机器学习算法(不调包)

目前玩机器学习的小伙伴&#xff0c;上来就是使用现有的sklearn机器学习包&#xff0c;写两行代码&#xff0c;调调参数就能跑起来&#xff0c;看似方便&#xff0c;实则有时不利于个人能力发展&#xff0c;要知道现在公司需要的算法工程师&#xff0c;不仅仅只是会调参&#x…

分布式中常见的问题及其解决办法

分布式中常见的问题及其解决办法 一、多个微服务要操作同一个存储在redis中的变量&#xff0c;如何确保这个变量的正确性 答&#xff1a; 在多个微服务操作同一个存储在Redis中的变量时&#xff0c;可以采取以下措施来确保变量的正确性&#xff1a; 1、使用Redis的事务&…

JAVA题目笔记(十三) 爬虫

一、网络爬取 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.URL; import java.net.URLConnection; import java.util.regex.Matcher; import java.util.regex.Pattern;public class Main {public static v…

HTML 标签属性——<a>、<img>、<form>、<input>、<table> 标签属性详解

文章目录 1. `<a>`元素属性hreftargetname2. `<img>`元素属性srcaltwidth 和 height3. `<form>`元素属性actionmethodenctype4. `<input>`元素属性typevaluenamereadonly5. `<table>`元素属性cellpaddingcellspacing小结HTML元素除了可以使用全局…