天天看點

axure 滑鼠樣式_10分鐘學會Axure複雜互動功能

用Axure中的全局變量+中繼器+動态面闆,實作動态查詢功能。

簡單四步即可實作:1、設定一個全局變量,将全局變量通過送出按鈕傳遞到連結頁面;2、在中繼器中放入商品清單;3、将不同的中繼器清單放入不同的動态面闆狀态中;4、在商品清單頁面的頁面載入事件中添加不同的情形進行判斷。

具體操作步驟如下:

1、設定一個全局變量,将全局變量通過送出按鈕傳遞到連結頁面:添加全局變量“點選橫向菜單中的【項目】-->【全局變量設定】-->輸入全局變量名稱;給送出按鈕添加滑鼠單擊時頁面傳值事件“點選【互動】-->【建立互動】-->【單擊時】-->【設定變量值】-->【目标】中選擇變量值為第二步中設定的全局變量名稱-->【設定為】中選擇‘元件文字’-->【元件】中選擇第一步中拖入的文本輸入框-->點選完成按鈕”;

axure 滑鼠樣式_10分鐘學會Axure複雜互動功能

2、在中繼器中放入商品清單:在頁面拖入Axure預設元件【中繼器】-->輕按兩下拖入的中繼器元件à删除中繼器中的矩形元件;

在中繼器中拖入Axure預設元件【圖檔】-->拖入Axure預設元件【文本标簽】-->将文本标簽放在圖檔下方并重命名為“價格”-->在價格下方拖入【文本段落】;

為中繼器資料表的列标題指派,在右側樣式面闆中的資料清單中,給表頭中的列标題重命名,第一列标題命名為“image”,第二列标題命名為“price”,第三列标題命名為“details”;

将中繼器中的元件與資料表的清單題進行關聯,點選樣式面闆右側的互動,為每項加載時事件,選擇元件動作【設定文本】-->目标欄選擇拖入的“文本标簽”,設定為欄選擇“文本”,點選值後面的fx符号,點選彈框中的【插入變量和函數】,選擇中繼器資料集中的“item.price”。重複以上操作将元件文本段落與資料表中的details 關聯上,圖檔元件關聯時,元件動作選擇【設定圖檔】即可;

在中繼器資料表中輸入價格和詳細資訊,image對應的列中在表格中點選滑鼠右鍵導入圖檔即可。

axure 滑鼠樣式_10分鐘學會Axure複雜互動功能

3、将不同的中繼器清單放入不同的動态面闆狀态中:在頁面拖入Axure預設元件【動态面闆】à添加狀态1為衣服面闆à添加狀态2為口罩面闆à添加狀态3為查詢不到資料面闆;

将衣服清單的中繼器放在狀态1中,将口罩清單的中繼器放在狀态2中。在狀态3中放入圖示和提示語;

axure 滑鼠樣式_10分鐘學會Axure複雜互動功能

4、在商品清單頁面的頁面載入事件中添加不同的情形進行判斷:在商品清單頁面的【頁面載入時】事件中添加三個情形,情形1:如果搜尋時設定的全局變量值包含了衣服,則設定面闆狀态到衣服面闆。情形2:如果搜尋時設定的全局變量包含了口罩,則設定面闆狀态到口罩面闆。情形3:如果搜尋時設定的全局變量既不包含口罩也不包含衣服,則設定面闆狀态到狀态3;

axure 滑鼠樣式_10分鐘學會Axure複雜互動功能

經過步驟分解,是不是很簡單?