axure商城

【Axure 教程】中繼器中級教程-下拉搜索

在入門教程中已經跟大家講解過中繼器的篩選功能,今天,我們主要進一步了解如何使用函數式,實現下拉(模糊)搜索框的制作

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

所需原件:

  1. 中繼器
  2. 文本框

今天的課程,我們主要進一步了解如果使用函數式,實現下拉(模糊)搜索框的制作。

一、搜索框

如上圖所示,拖入文本框,作為搜索輸入框,文本標簽作為搜索框標題,搜索圖標作為搜索的指示,按上圖布局即可得到搜索框的初始模型;

二、下拉列表

如上圖,拖入中繼器,并做好數據填充和【每項加載】的設置,將數據中的【SF】賦值給【省份】的文本標簽;

三、交互設置

選中文本框,并添加【文本改變時】的交互,新建【添加篩選】的動作,設置規則為:[[(Item.SF.indexof(Text))>-1]]

雙擊中繼器,選中文本標簽,并添加【點擊時】將【Item.SF】賦值給到搜索文本框,同時設置為選中狀態;

四、細節優化

將中繼器默認為隱藏狀態,并在點擊文本框時,顯示中繼器;

點擊中繼器的文本標簽后,隱藏中繼器;


更多內容,微信搜索“愛學兒”,一起交流探討吧!

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

【Axure 教程】中繼器中級教程-頂部導航

2021-6-1 8:13:04

基礎教程高級教程

【Axure 教程】中繼器中級教程-聯級框

2021-6-3 9:45:19

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo