Axure设计之下拉多选框制作教程C（中继器）

利用Axure制作下拉多选器组件可以极大地提升原型制作的效率和效果。以下是基于你提供的详细步骤的详细指导，帮助你在Axure中实现一个功能完善、高保真且可复用的下拉多选器组件。

一、案例预览

预览地址：https://pghy0i.axshare.com

实现效果包括：

• 滚动浏览：当下拉选项内容超出预设高度时，选项列表支持滚动显示，确保用户能够全面浏览所有选项。
• 视觉反馈：选项在选中状态下，边框将高亮显示，且鼠标悬停和选中时会呈现不同的交互样式，提升用户交互体验。
• 状态图标切换：下拉框的箭头图标会根据当前状态进行切换，选中后可显示删除已选项的功能。
• 标签展示：用户在选择框中选中某个选项后，该选项将以标签形式即时展示在选择框上方，选中多项时显示“+n”。
• 取消选择：每个选项标签旁都设有删除图标，用户点击后可轻松取消该选项的选择。

二、设计思路

1. 选择框设计：
   • 使用矩形元素作为选择框主体。
   • 嵌入文本框显示提示信息（如“请选择”）。
   • 在矩形右侧配置向下箭头图标，用于触发下拉操作。
   • 选中后的选项通过中继器回显，每个选项配备删除按钮。
2. 下拉选项设计：
   • 使用中继器组件创建下拉选项，以提高修改与复用效率。
   • 外层包裹动态面板，控制下拉框的显示范围与布局。
   • 定义中继器数据结构，包括“option”（选项文本内容）和“checked”（选中状态，0未选中，1已选中）。
3. 交互设置概览：
   • 选择框单击：触发下拉框显示/隐藏。
   • 下拉选项加载：初始化选项列表。
   • 下拉选项单击：更新选中状态并回显在选择框中。
   • 选中选项显示：处理已选项显示与删除按钮添加。
   • 选中选项删除：取消选择并更新选择框内容。

三、重要步骤

1. 创建选择框

• 拖入矩形：作为选择框容器。
• 拖入文本框：嵌入矩形内，用于显示提示信息（如“请选择”）。
• 拖入箭头图标：放在矩形右侧，作为下拉标识。

2. 创建下拉选择弹框

• 拖入矩形：作为下拉选择弹框的容器，设置适当的样式。
• 设置动态面板：将矩形包裹在动态面板内，控制下拉框的显示与隐藏。

3. 设置选择框和下拉选择弹框的交互

• 选择框单击事件：
  • 设置下拉选择弹框显示。
  • 设置箭头图标旋转至向上角度（可使用旋转动画）。
• 下拉选择弹框隐藏事件：
  • 设置下拉选择弹框隐藏。
  • 设置箭头图标旋转至向下角度。

4. 创建下拉选项中继器

• 拖入中继器：放在动态面板内。
• 定义中继器列：添加“option”和“checked”列。
• 添加选项数据：在中继器数据集内添加多个选项数据。

5. 设置下拉选项中继器的交互

• 中继器每项加载时：
  • 设置选项的文本内容为“option”列的值。
  • 设置选项的选中状态为“checked”列的值（使用条件格式设置边框高亮）。
• 选项单击事件：
  • 更新“checked”列的值（切换0和1）。
  • 触发回显已选项标签的更新。

6. 创建回显已选项标签

• 拖入标签：用于显示已选项。
• 拖入“+n”矩形：用于显示已选项数量。
• 拖入隐藏文本框：记录已选项数量（命名为“已选数”）。

7. 设置文本框“已选数”的交互

• 更新已选数：当下拉选项选中或取消选中时，更新“已选数”的值。
• 回显标签：根据“已选数”的值动态添加或删除标签，并更新“+n”矩形显示。

8. 设置删除按钮的交互

• 删除图标单击事件：
  • 更新对应选项的“checked”列值为0（取消选中）。
  • 更新“已选数”的值。
  • 触发回显标签的更新。

四、测试和迭代

• 完成上述步骤后，进行测试，确保所有交互功能正常。
• 根据测试结果进行必要的调整和优化。

五、复用和优化

• 将创建好的下拉多选器组件保存为自定义组件，方便在后续项目中复用。
• 对样式和交互进行进一步的优化，提升用户体验。

通过以上步骤，你可以在Axure中高效地制作一个功能完善、高保真且可复用的下拉多选器组件，提升原型制作的效率和效果。

 友情提示：该组件已上传CSDN，有需要可查看文章头部资源地址下载。

 --- End·往期推荐---

Axure移动端高保真动态交互元件库：加速原型设计的全能工具箱-CSDN博客

数据可视化大屏产品设计方案（附Axure源文件预览）-CSDN博客

智慧水务：解锁供水行业的未来密码，引领数字化转型新篇章

Axure原型设计秘籍：解锁高效设计与开发的宝藏工具

Axure Web端交互元件库：从Quick UI到700+组件的飞跃

Axure十大常用函数教程