axure商城

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

在入门教程中已经跟大家讲解过中继器的筛选功能,今天,我们主要进一步了解如何使用函数式,实现下拉(模糊)搜索框的制作

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

所需原件:

  1. 中继器
  2. 文本框

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

一、搜索框

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

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

二、下拉列表

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

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

三、交互设置

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

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

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

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

四、细节优化

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

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

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

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


更多内容,微信搜索“爱学儿”,一起交流探讨吧!

给TA打赏
共{{data.count}}人
人已打赏
基础教程

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

2021-6-1 8:13:04

基础教程高级教程

【Axure 教程】中继器中级教程-联级框

2021-6-3 9:45:19

axure商城
8 条回复 A文章作者 M管理员
  1. ·W·

    新手没看懂😂

  2. 年仅九岁ᯤ²ᴳ

    这个教程是错的,连模糊查询都没实现

  3. hichin

    为什么我的只能下拉选择一次呢?想重新再选,操作不了~~~

  4. 悟空144189

    你这个是axtrue9么 我这里怎么没有文本改变事件,而是文本已变更

    • SamDesigner

      是 Axure 9,注意是用文本输入框,可能版本不同,翻译不同,你可以试试

  5. 15999195198

    可以下载吗

    • SamDesigner

      关注公众号,通过微信小店有偿下载哈

  6. 15999195198

    keyi xiazaima

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索