主要内容

在QQ使用中我們在搜索框輸入關鍵字可檢索需要的聯系人，并可以添加到已聯系人列表，删除搜索關鍵字，切換到分組聯系人列表，本課來學習如何實現這個交互。交互中會使用Axure裡面的中繼器、變量、函數。

交互效果

3.在檢索輸入框輸入檢索關鍵字，檢索并顯示包含關鍵字的聯系人；删除檢索關鍵字，切換到聯系人分組列表。

4.搜索聯系人列表中的聯系人，可點擊添加為已選聯系人。

原型接着上一節課做交互

四、設置“文字改變時”事件

步驟6：

選中搜索輸入框，雙擊“文字改變時”事件，打開用例編輯器

用例1：

編輯條件：如果部件值長度.當前部件.= (為空)

動作1：選擇“移除過濾器”，第四步選擇“篩選”中繼器，勾選“移除所有過濾”

動作2：選擇“設置面闆狀态”，第四步選擇“聯系人”，選擇狀态到狀态1

用例2：

編輯條件：如果部件文字.當前部件.≠ (為空)（if 部件文字 當前部件 ≠ ""）

動作1：選擇“移除過濾器”，第四步選擇“篩選”中繼器，勾選“移除所有過濾”

動作2：選擇“等待”，等待0秒

動作3：選擇“設置文本”，第四步選擇“關鍵字判斷”，将文本值設置為“點擊下面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·文本框（單行）

點擊插入變量...選擇字符串函數：indexOf('searchValue')，選中“LVAR”選擇中繼器下面的“Item.name”，選中'searchValue'，選擇“LVAR1”（設置值為：[[Item.name.indexOf(LVAR1)]]）

動作4：選擇“新增過濾器”，第四步選擇：篩選（中繼器），點擊規則後“fx”，在編輯窗口，點擊插入變量..，選擇中繼器下面的“isMarked”
選中用例2，選擇“切換IF/ELSE IF

步驟7：

選中“關鍵字判斷”雙擊“文字改變時”事件，打開用例編輯器
用例1

編輯條件：值.[[This.text]].≠ .值 .-1（設置條件為：if "[[This.text]]" ≠ "-1"）

動作1：選擇“标記行”，第四步選擇““篩選（中繼器）”
用例2

選擇“取消标記行，第四步選擇““篩選（中繼器）”

五、設置“鼠标單擊時”事件

步驟8：

打開聯系人“篩選（中繼器)的編輯區，選中“name”，雙擊“鼠标單擊時”事件，打開用例編輯器

編輯條件：選擇“變量值”不包含·值·點擊後面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·當前部件

點擊插入變量...選擇部件下面确的“text”，再選中“This”，選擇“LVAR1”（設置條件“if 變量 OnLoadVariable 不包含 "[[LVAR1.text]]”）

動作1：選擇“設置變量值”

第四步：選擇“OnLoadVariable”，設置變量值為，點擊“fx”，打開編輯值窗口，新增局部變量：LVAR1=部件·當前部件

點擊插入變量...選擇字符串函數“concat('string')”，選中“LVAR”選擇“OnLoadVariable”，再選中“'string'，選擇部件下的“text”，再選中“This”，選擇“LVAR1”（設置值為：[[OnLoadVariable.concat(LVAR1.text)]]）

動作2：選擇“新增行”

第四步：選擇“中繼器”，點擊新增行打開編輯窗器，點擊“name”下面的“fx”，在編輯值窗口，點擊點擊插入變量..，選擇部件下的“text”

步驟9：
制作完成，生成原型預覽效果

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!