Axure 9 实战案例，动态面板的应用 4.1，省市区三级联动下拉菜单（重制简易版）

news2024/11/15 12:36:15

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。
本次课程我们继续来学习一下，动态面板的应用。本篇我们来讲解一下，如何绘制省市区联动下拉菜单（重新撰写简易版）。
在这里插入图片描述

下拉菜单初稿

为了节省时间，这里提前把下拉菜单初稿准备好了。我们的思路是：
①当省份选择【北京】时，城市菜单切换为北京状态；
②当城市菜单选择【北京市】时，区县菜单切换为北京区县。
为了防止城市菜单与区县菜单出现误操作的情况，我们在城市菜单和区县菜单中分别加入禁用状态，思路如下：
③当省份选项为【请选择省/直辖市】，城市菜单和区县菜单为禁用状态；
④当城市菜单选项为【请选择市】时，区县菜单为禁用状态。
在这里插入图片描述

完成效果图

第一步：创建城市菜单动态面板

首先从左侧元件栏中往画布拖入一个动态面板，命名为【城市菜单】，在概要栏中的动态面板State1上点击右键，在弹出菜单中选择添加状态，新增一个State2状态；然后将初稿中【禁用城市】拖入State1，将【北京城市】拖入State2，接着将State1命名为【禁用】、State2命名为【北京市】。
在这里插入图片描述

拖入一个动态面板并命名为【城市菜单】

在这里插入图片描述

在State1上点击右键，选择<添加状态>，新增为State2

在这里插入图片描述

将【禁用城市】拖入State1，将【北京城市】拖入State2，并分别命名

第二步：创建区县动态面板

参照第一步的操作，再拖入一个动态面板命名为【区县菜单】，在概要中添加多一个State，将初稿中【禁用区县】拖入State1，将【北京区县】拖入State2，接着将State1命名为【禁用】、State2命名为【北京区县】。
在这里插入图片描述

第二步的结果

第三步：设置省份菜单的联动交互

首先回到正常画布，选中省份菜单，在右侧栏的交互中点击新建交互，再依次点击<选项改变时_设置面板状态_城市菜单>（城市菜单即为第一步创建的动态动态），保持默认状态为<禁用>，点击确定。

在这里插入图片描述

选中省份菜单，在右侧栏点击新建交互
![在这里插入图片描述](https://img-blog.csdnimg.cn/ba68f97188ea43e9b39dd052551157bb.png#pic_center) 依次点击<选项改变时_设置面板状态_城市菜单>，保持默认状态为<禁用>直接确定

接着在“选项改变时”上点击<启用情形>；在弹出情形编辑弹窗中，点击<添加条件>，保持默认项不变，直接点击<确定>。
在这里插入图片描述

在“选项改变时”上点击<启用情形>，再点击<添加条件>

在这里插入图片描述

保持“被选项==请选择省/直辖市”

这里的交互是指，我们通过判断省份菜单的选项，来切换城市/区县菜单的状态：
①情形一，当选项为请<选择省/直辖市>时，切换城市菜单和区县菜单的状态为<禁用>；
②情形二，当选项为<北京>时，切换城市菜单的状态为<北京市>。
按照以上的规则，在情形一中，我们还差一步，就是在<设置面板状态>中添加<区县菜单>，同样保持默认状态为<禁用>，交互结果如下图。
在这里插入图片描述

省份菜单情形1的交互

那么我们接着依照前面情形一的步骤，来添加第二种情形。首先点击<选项改变时>的添加情形，打开情形编辑窗，在弹窗中点击添加条件，最后的下拉菜单选择北京。

在这里插入图片描述

点击<选项改变时>的添加情形，在弹窗中点击添加条件，最后的下拉菜单选择北京

接着在情形2中，点击<添加动作>再依次点击<设置面板状态_城市菜单>，选择状态为<北京市>。

在这里插入图片描述

在情形2中，点击<添加动作>再依次点击<设置面板状态_城市菜单_北京市>

在这里插入图片描述

省份菜单所有的交互

第四步：设置北京城市菜单的联动交互

根据第三步的交互设置方法，同理我们可以设置<北京城市>菜单的联动交互，我们通过判断<北京城市>菜单的选项，来切换区县菜单的状态：
①情形一，当选项为<请选择市>时，切换区县菜单的状态为<禁用>；
②情形二，当选项为<北京市>时，切换区县菜单的状态为<北京区县>。
此处不再重复啰嗦了，大家直接看下面的<北京城市>菜单的交互结果吧。
在这里插入图片描述