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

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

预览地址：https://pghy0i.axshare.com
实现结果包罗：

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

二、计划思路

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

三、紧张步骤

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十大常用函数教程 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告