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

ops/2024/11/12 18:14:48/

使用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/ops/132479.html

相关文章

【数据分享】1901-2023年我国省市县镇四级的逐年降水数据(免费获取/Shp/Excel格式)

之前我们分享过1901-2023年1km分辨率逐月降水栅格数据和Shp和Excel格式的省市县四级逐月降水数据,原始的逐月降水栅格数据来源于彭守璋学者在国家青藏高原科学数据中心平台上分享的数据!基于逐月数据我们采用求年累计值的方法得到逐年降水栅格数据&#…

数据分析-38-时间序列分解之时变滤波器经验模态分解TVFEMD

文章目录 1 时间序列模态分解1.1 模态分解的概念1.2 模态分解的作用1.3 常用的模态分解方法1.4 模态分解的常用库2 时变滤波器经验模态分解TVFEMD2.1 TVFEMD的流程2.2 加载数据集2.2.1 数据重采样2.2.2 原始数据可视化2.3 代码实现TVFEMD3 参考附录1 时间序列模态分解 1.1 模态…

Blender 几何、线框猴头的构建 笔记

一、学习blender视频教程链接 案例7:猴头构建_建模动画_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Bt4y1E7qn?spm_id_from333.788.videopod.episodes&vd_sourced0ea58f1127eed138a4ba5421c577eb1&p23 二、几何节点基础教程 1.首先添加几何节…

Vite环境下uniapp Vue 3项目添加和使用环境变量的完整指南

一、引言 在uniapp项目中,合理配置环境变量对于提高开发效率和保障项目安全至关重要。Vite作为新一代的前端构建工具,为环境变量的管理提供了简洁而强大的支持。下面,我们将一步步学习如何在Vite环境下为uniapp Vue 3项目添加和使用环境变量…

基于 Encoder-only 架构的大语言模型

基于 Encoder-only 架构的大语言模型 Encoder-only 架构 Encoder-only 架构凭借着其独特的双向编码模型在自然语言处理任务中表现出色,尤其是在各类需要深入理解输入文本的任务中。 核心特点:双向编码模型,能够捕捉全面的上下文信息。 En…

uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用

需求 在2022年5月初,网络上各大平台上,都开始展示用户IP属地,在某音、某手等小视频平台以及各主流网站应用中,都展示IP归属地,如下图所示: 解决办法 收费文档的肯定有很多,基本你百度搜“归…

数据结构题集-第二章-线性表-两单链表合并

说明 本文参照严蔚敏《数据结构(C语言版)题集》一书中包含的问答题和算法设计题目,提供解答和算法的解决方案。请读者在自己已经解决了某个题目或进行了充分的思考之后,再参考本解答,以保证复习效果。由于作者水平所限,本解答中一…

A股需要分析的数据

1. 大盘全面分析 在这一部分,我们将深入探讨大盘的整体健康状况,包括潜在的风险和可能的机会。 1.1 系统风险评估 首先,我们将评估当前市场是否存在系统性风险。这包括全球经济状况、地缘政治局势、以及宏观经济政策的变化对市场的整体影响…