Axure PR 9 多级下拉选择器 计划&交互
https://img-blog.csdnimg.cn/img_convert/a32e069d6e8aedd48f55bb4876384ccf.gif
各人好，我是大明同砚。
Axure选择器是一种在交互计划中常用的组件，这期内容，我们来探讨Axure中多级下拉选择器计划与交互本领。
https://img-blog.csdnimg.cn/img_convert/38a9f386e5bff093c7e174710781e5ee.gif
下拉列表选择输入框元件
创建选择输入框所需的元件
1.在元件库中拖出一个矩形元件。
2.选中矩形元件，在样式窗格中将按钮元件的宽设置为200，高设置为32，文本左侧对齐，线段添补颜色灰色（#D9D9D9）线宽为1,圆角半径5，边距左右侧10。
https://img-blog.csdnimg.cn/img_convert/d506ffcb3014d18f51fdd172de3546ff.png
3.在iconfont搜索向下和向上icon，复制SVG代码，粘贴到画布上。
4.拖入一个动态面板，在样式窗格中将动态面板的宽高设置为32，并将向下icon剪切粘贴到动态面板内State1中，将向上剪切粘贴到动态面板内State2中。
https://img-blog.csdnimg.cn/img_convert/45f6200f5787e6473bbf73491891f6e2.png
5.选中动态面板基于矩形框右对齐，选中矩形和动态面板右键组合。
https://img-blog.csdnimg.cn/img_convert/d997091a16870986d018d7f07c3de37a.png
创建下拉选择列表所需的元件
1.在元件库中拖入一个矩形，将宽设为120，高设置为160，线段设为0，阴影设为灰色 （#7F7F7F） 透明度35%，模糊设为7。
https://img-blog.csdnimg.cn/img_convert/104de036278ed7fe3c07bf19eb5fec1f.png
2.在元件库中拖入一个中继器元件。
https://img-blog.csdnimg.cn/img_convert/6ddd5ad30b99468522cf956d605e4a28.png
3.双击中继器元件，选中中继器内部矩形元件，在样式窗格将矩形宽设为120，高设为32，线宽设为0，边距左侧10。
https://img-blog.csdnimg.cn/img_convert/a006a035884a4626adaad13322a5e8ad.png
4.在iconfont搜索向右icon，复制SVG代码 粘贴到画布上，基于中继器矩形向右对齐 右键转为动态面板，双击动态面板 选中向右icon 右键变换图片 转换SVG图片为图形 居中对齐，复制State1状态到State2，选中State2向右icon 将添补颜色设为蓝色 （#0052D9）。
https://img-blog.csdnimg.cn/img_convert/d866447877e5bb1aef5bbe9a02a3c5dd.png
选中中继间矩形，在样式窗格将数据窗格Column0 修改为type1，并在type1列输入文本。
https://img-blog.csdnimg.cn/img_convert/b17342e2a7a3a6a51b8d6a2eb577a4ae.png
5.选中中继器和矩形 右键 组合 。
https://img-blog.csdnimg.cn/img_convert/86bb5b6c8f26eae758429614292d669e.png
选中中继器元件，在交互窗格中，将隔离列表之间的选项组取消勾选。
https://img-blog.csdnimg.cn/img_convert/8583ae7b8658c5a8e03648f2a0cdec1a.png
选中中继器矩形，在样式窗格中将文本内容设为左对齐。
https://img-blog.csdnimg.cn/img_convert/6ab29a240e5a45a9eaf9b4970f2c35f2.png
6.复制两个组合列表元件。
https://img-blog.csdnimg.cn/img_convert/e00e4097f368f3ad5554856d773cc2d4.png
选中第二个中继间矩形，在样式窗格将数据窗格type1修改为type2，并在type1、2列输入文本，type1、type2文本必须有关联性，不然筛选时大概会堕落。
https://img-blog.csdnimg.cn/img_convert/5148a663f26cd397b70b1339cefbc3a9.png
7.第三个中继器同步以上操作，将icon动态面板删除，替换为勾选icon 。
https://img-blog.csdnimg.cn/img_convert/cb8a89945eedba7654c65db5fb25ab56.png
8.选中中继器组合元件，在样式窗格元件名称分别命名 一级分类、二级分类、三级分类。
创建交互
创建“选择输入框”的交互状态
1.选中选中输入框元件，在交互窗格点击新建交互，添加单击时显示/潜伏 显示 一级分类，设置选中 当前 为“真” ，设置icon动态面板 到 State2 。
https://img-blog.csdnimg.cn/img_convert/1d0c93f20d1641ac2ef1422e4f03c068.png
创建icon动态面板 的交互状态
1.选中icon动态面板，在交互窗格中创建单击时交互，启用情形判断。
情形1: 元件可见 一级分类 等于 假
https://img-blog.csdnimg.cn/img_convert/f7c88b68845c91bf5b00b2d48d01c0ce.png
设置显示/潜伏 显示 一级分类， 设置选中 矩形 （选择输入框）为 “真”，设置面板状态 当前 到 State2。
https://img-blog.csdnimg.cn/img_convert/b44a7f89bbdc7e1cfaf1bea75dbf3d2f.png
情形2：元件可见 一级分类 等于 “真”，设置显示/潜伏 潜伏 一级分类， 设置选中 矩形 （选择输入框）为 “假”，设置面板状态 当前 到 State1。
https://img-blog.csdnimg.cn/img_convert/4384aa8726cf6a5e1169f8076850d6dd.png
创建“下拉选择列表”的交互状态
1.选中一级分类元件，双击中继器，到中继器内部矩形，在交互窗格 创建 单击时交互，显示/潜伏 显示 二级分类 设置选中 当前 为 真。
https://img-blog.csdnimg.cn/img_convert/b09edf2e0f14f0a10eb6144145f28887.png
添加筛选 二级分类 中继器 规则 插入变量函数 []
https://img-blog.csdnimg.cn/img_convert/a9bb7fbeaf01c1f3e0a9bccc4a032027.png
再看一遍完备规则
https://img-blog.csdnimg.cn/img_convert/e3a96d0813f555a51177887ff6816e96.png
添加动作 显示/潜伏 潜伏 三级分类
https://img-blog.csdnimg.cn/img_convert/fab0b26c37dbf6bb94f60c4839f74459.png
2. 添加全局变量，单击项目选项，全局变量，新增 type1、type2、type3 变量。
https://img-blog.csdnimg.cn/img_convert/a0649795d6617cc6706c377ac35ee050.png
3.设置变量值 type1 值 插入变量或函数 []
https://img-blog.csdnimg.cn/img_convert/ba5604d6db95537549f0d80a9f3c5b43.png
好的，来看一下完备交互 。
https://img-blog.csdnimg.cn/img_convert/9726c2535064ae26f7c995ff0a7fce3e.png
4.设置文本 矩形 （（选择输入框）） 文本 插入变量或函数 []
https://img-blog.csdnimg.cn/img_convert/69094cc629f812758a0b7f136d7ad02b.png
看一下完备交互。
https://img-blog.csdnimg.cn/img_convert/2d43c6d7ce844c7879b7ce32466f6c2b.png
5.新建交互 选中 设置icon动态面板 到 State 2，新建交互 取消选中时 设置icon动态面板 到State 1。
https://img-blog.csdnimg.cn/img_convert/aee13b1eda8892c20e4a3d4e7025f1f2.png
6.设置形状属性 点击显示全部 交互样式 鼠标悬停的样式 添补颜色 灰色 （#F2F2F2），元件选中的样式 字色 蓝色（#0052D9），选项组 1
https://img-blog.csdnimg.cn/img_convert/354ba9a0ef437db9279273286cc36b1d.png
同步设置 二级分类
https://img-blog.csdnimg.cn/img_convert/165bd97cd4c73441b35e06e53b589011.png
7.选中三级分类元件，双击中继器，到中继器内部矩形，在交互窗格 创建单击时交互，设置选中 当前 为 “真”，设置变量值 type3 为 []，设置文本 矩形 （筛选输入框） 为 []。
https://img-blog.csdnimg.cn/img_convert/5b13802458df7f6b2a0ec99741587d98.png
新建交互，选中 显示 / 潜伏 显示 形状 （勾选），新建交互，选中 显示 / 潜伏 潜伏 形状 （勾选）
https://img-blog.csdnimg.cn/img_convert/66283c73f11f0e30f1a9f849e72f2f06.png
选中 勾选 icon 设为潜伏
https://img-blog.csdnimg.cn/img_convert/f2cfc81f9a143e7606ed38b4142dc9bc.png
8.设置形状属性 点击显示全部 交互样式 鼠标悬停的样式 添补颜色 灰色 （#F2F2F2），元件选中的样式 字色 蓝色（#0052D9），选项组 3
https://img-blog.csdnimg.cn/img_convert/6714aa79a67b4ee556602588fd572ee6.png
9.在元件库中拖入一个内联框架，选中内联框架，在样式窗格中勾选潜伏边框，右键转为动态面板，选中动态面板，将框设为 148 高设为160 ，右键 滚动条 设为垂直滚动，剪切三级分类元件 粘贴到动态面板内。
https://img-blog.csdnimg.cn/img_convert/06e5be95ebe65d4b57ec8b98d7d570b2.png
在元件库中拖入一个动态面板，遮住三级分类下拉选项滚动条，复制配景，粘贴到动态面板内。
https://img-blog.csdnimg.cn/img_convert/8fc357c98dd4467211d94ca428c96c19.png
剪切三级分类下拉选项元件，粘贴到动态面板内。
https://img-blog.csdnimg.cn/img_convert/52ab49edda5c2df0d1a3a71f7f93b358.png
10.因为叠加了动态面板，以是，一级分类中继器内矩形元件的显示/潜伏 潜伏 中继器的交互必要重新设置，二级分类中继器内矩形元件单击时 显示/潜伏 显示中继器的交互也必要重新配置。
https://img-blog.csdnimg.cn/img_convert/b51b3f5998a40b9e65f6a0b749162fc8.png
选中三级分类下拉元件，设置为潜伏。
https://img-blog.csdnimg.cn/img_convert/44d04213bd54517e620b9bb57408d4fb.png
再用同样的方式，设置二级分类，调整一级分类单击时，显示/潜伏 交互。
https://img-blog.csdnimg.cn/img_convert/a2695a15a61f98d9079fee9a7234605c.png
选中一级分类元件，右键 转为动态面板，将二级分类，三级分类粘贴到一级分类动态面板内。
https://img-blog.csdnimg.cn/img_convert/93313c5fb8ccd85a698d353d25f8a3aa.png
、
选中整个动态面板，设为潜伏，并修改 矩形（下拉输入框）单击时 显示/潜伏 一级分类改为整个动态面板和向下icon动态面板，情形条件中元件可见于 一级分类、显示/潜伏 一级分类。
https://img-blog.csdnimg.cn/img_convert/651951d6a591930d48d5aadd481e19b5.png
预览交互
点击预览，在预览页面鼠标下拉列表选择输入框可以选择对应的选项。
https://img-blog.csdnimg.cn/img_convert/21f936ce95c9e08cfb74a46ecc63b72b.gif
预览地点：https://yfeynz.axshare.com
OK，这期内容到这里就结束了。
我是大明同砚
下期见
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]