主要內(nèi)容

在使用QQ中，不能重復(fù)添加組聯(lián)系人、批量添加、添加的聯(lián)系人。在搜索框中輸入文字時(shí)，可以選擇切換到搜索聯(lián)系人列表。在本課程中，您將學(xué)習(xí)如何執(zhí)行這些交互。

交互中會(huì)使用Axure里面的中繼器、變量、函數(shù)。

交互效果

1.點(diǎn)擊聯(lián)系人分組，批量添加分類下的所有聯(lián)系人，已添加過的聯(lián)系人不再重復(fù)添加。

2.檢索輸入框?yàn)槲淖州斎霠顟B(tài)時(shí)，切換到搜索聯(lián)系人列表。

一、原型制作

步驟1：

此原型在前面新建QQ討論組上面的基礎(chǔ)上制作，把聯(lián)系人和已選聯(lián)系人兩個(gè)動(dòng)態(tài)面板分別命名為：聯(lián)系人、已選聯(lián)系人

步驟2：

在聯(lián)系人動(dòng)態(tài)面板新增狀態(tài)2，在狀態(tài)2添加一個(gè)中繼器，命名“篩選”，刪除中繼器里面的行，新增加二列，每列分別命名：mig、name

1）添加一個(gè)矩形，調(diào)整位置與大?。簒:22.y :0，w:158,h:18,命名：name，線條顏色設(shè)置為無

2）添加圖片部件，調(diào)整位置與大?。簒:0.y :5， w:18,h:18,命名：mig

3）添加單行文本框，調(diào)整位置與大小x:179.y :0，w:2,h:25，命名：關(guān)鍵字判斷，并設(shè)為隱藏

在數(shù)據(jù)集“name”列輸入聯(lián)系人的信息

在中繼器項(xiàng)目交互下，雙擊每項(xiàng)加載時(shí)，打開用例編輯器

動(dòng)作1：設(shè)置文本，第四步選擇“name”將文本值設(shè)置為“I”

動(dòng)作2：設(shè)置圖像，第四步選擇“mig”默認(rèn)“圖像”導(dǎo)入QQ頭像

二、設(shè)置分組樹節(jié)點(diǎn)“鼠標(biāo)單擊時(shí)”事件

步驟3：

打開聯(lián)系人動(dòng)態(tài)面板編輯區(qū)，選中聯(lián)系人“最近聯(lián)系人”，雙擊“鼠標(biāo)單擊時(shí)”打開用例編輯器

編輯條件：選擇“變量值”不包含·值·點(diǎn)擊后面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1

點(diǎn)擊插入變量...選擇部件下面確的“text”，再選中“This”，選擇“LVAR1”；（即設(shè)置條件“if 變量 OnLoadVariable 不包含 "[[LVAR1.text]]”）

動(dòng)作1：選擇“設(shè)置變量值”

第四步：選擇“OnLoadVariable”，設(shè)置變量值為，點(diǎn)擊值后面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1

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

動(dòng)作2：選擇“新增行”

第四步：選擇“中繼器”，點(diǎn)擊新增行，點(diǎn)擊“name”下面的“fx”，在編輯值窗口，新增局部變量：LVAR1=部件·1.1，點(diǎn)擊插入變量...，選擇部件下面確的“text”，再選中“This”，選擇“LVAR1”（設(shè)置值為：[[LVAR1.text]]）

設(shè)置用例2、用例3（復(fù)制、粘貼用例1），修改局部變量中（LVAR1=部件·1.2）對(duì)應(yīng)的樹節(jié)點(diǎn)為1.2、1.3即可

選中用例2、用例3，右鍵選擇“切換IF/ELSE IF”

步驟4：

其它兩組聯(lián)系人：我的好友、Arduino同樣設(shè)置分組樹節(jié)點(diǎn)“鼠標(biāo)單擊時(shí)”事件，重復(fù)步驟3

復(fù)制、粘貼步驟3用例1，修改用例條件局部變量對(duì)應(yīng)后面的樹節(jié)點(diǎn)部件名稱即可，如2.1、2.1、3.1、3.2等

我的好友組中共有9名聯(lián)系人即設(shè)置9個(gè)用例，并修改對(duì)應(yīng)的樹節(jié)點(diǎn)名稱，Arduino組中有4個(gè)聯(lián)系人即設(shè)置4個(gè)用例，并修改對(duì)應(yīng)的樹節(jié)點(diǎn)名稱（該組聯(lián)系人有多少個(gè)即分別設(shè)置多少個(gè)用例

除用例1外其它用例同樣需要右鍵選擇“切換IF/ELSE IF”

?

三、設(shè)置搜索框“獲得焦點(diǎn)時(shí)”事件

步驟5：

選中搜索輸入框，雙擊“獲得焦點(diǎn)時(shí)”事件，打開用例編輯器

動(dòng)作：選擇“設(shè)置面板狀態(tài)”，第四步選擇“聯(lián)系人”，選擇狀態(tài)到狀態(tài)2