辉灿新闻网 原型设计 【Axure 教程】中继器中级教程-下拉搜索

【Axure 教程】中继器中级教程-下拉搜索

编辑导语:下拉搜索是我们常见的一种功能。在工作中,我们可能会需要利用Axure来实现下拉搜索设计。本篇文章里,作者就对如何使用Axure来制作下拉(模糊)搜索框进行了详细介绍,一起来看一下吧。

原型展示:https://q5bvf7.axshare.com

所需原件:

    中继器;文本框。

今天的课程,我们主要进一步了解如果使用函数式,实现下拉(模糊)搜索框的制作。

一、搜索框

如上图所示,拖入文本框,作为搜索输入框,文本标签作为搜索框标题,搜索图标作为搜索的指示,按上图布局即可得到搜索框的初始模型。

二、下拉列表

如上图,拖入中继器,并做好数据填充和【每项加载】的设置,将数据中的【SF】赋值给【省份】的文本标签。

三、交互设置

选中文本框,并添加【文本改变时】的交互,新建【添加筛选】的动作,设置规则为:[[(Item.SF.indexof(Text))>-1]]

双击中继器,选中文本标签,并添加【点击时】将【Item.SF】赋值给到搜索文本框,同时设置为选中状态。

四、细节优化

将中继器默认为隐藏状态,并在点击文本框时,显示中继器。

点击中继器的文本标签后,隐藏中继器。

本文由@Sam 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash, 基于CC0协议。

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/203.html

作者: Sam

【Axure教程】中继器菜单

【Axure 教程】中继器中级教程-顶部导航

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部