Axure教程：中繼器實現(xiàn)朋友圈發(fā)布圖文動態(tài)

Axure教程：中繼器實現(xiàn)朋友圈發(fā)布圖文動態(tài)實現(xiàn)的交互：模擬微信朋友圈，選擇圖片，編輯文字的交互；第一步：準(zhǔn)備元件2個中繼器：一個模擬手機(jī)相冊圖片（命名為模擬），一個模擬朋友圈添加圖片效果（命名為添加）朋友圈手機(jī)界面：彈框：文本框：用于輸入文字按鈕：添加圖片按鈕、完成按鈕、預(yù)覽按鈕、添加動態(tài)按鈕動態(tài)面板第二步：為中繼器添加模板分別在兩個中繼器中拖入圖片元件，設(shè)置尺寸為手機(jī)界面的三分之一，并在樣式中設(shè)置中繼器水平網(wǎng)格分布，設(shè)置每個項目數(shù)為3；另外在模擬的中繼器中拖入一個復(fù)選框，放到合適的位置；第三步：為中繼器添加數(shù)據(jù)選中模擬中繼器，在數(shù)據(jù)集，對列進(jìn)行命名，并右鍵點擊導(dǎo)入圖片，可導(dǎo)入5-9張圖片，然后添加【每項加載時】的用例，將模板與數(shù)據(jù)集進(jìn)行綁定；選中添加的中繼器，設(shè)置【每項加載時】圖片的值與模擬中繼器綁定；如下圖（因前幾篇文章已講過了具體的綁定步驟，所以這邊不會那么詳細(xì)，需要的可看前幾篇內(nèi)容）第四步：調(diào)整各元件的位置拖入動態(tài)面板，新建四個狀態(tài)state1、state2、state3，分別命名為選擇圖片、編輯頁面，將模擬中繼器拖入選擇圖片頁面；將添加中繼器拖入到編輯頁面；第五步：設(shè)置交互1、選中朋友圈右上角發(fā)布動態(tài)按鈕（即拍照的圖標(biāo)），添加【鼠標(biāo)單擊時】的交互用例，添加動作【顯示】選擇從手機(jī)相冊選擇的動態(tài)面板，設(shè)置動畫為向上滑動，并設(shè)置為燈箱效果；2、選中上一步的動態(tài)面板中的【從相冊選擇】的矩形，設(shè)置它的【選中】的交互樣式，設(shè)置填充顏色和字體顏色；添加【鼠標(biāo)單擊時】的交互用例，設(shè)置單擊時為選中狀態(tài)，并且設(shè)置隱藏該動態(tài)面板，同時顯示含有【選擇圖片】的動態(tài)面板，設(shè)置動態(tài)面板狀態(tài)為【選擇圖片】，3、選中模擬中繼器的圖片模板，添加【鼠標(biāo)單擊時】的用例，設(shè)置復(fù)選框為選中狀態(tài)，并設(shè)置【完成】按鈕為選中狀態(tài)；同時設(shè)置【添加行】，給編輯頁面中的添加中繼器設(shè)置圖片，設(shè)置圖片的值與模擬中繼器綁定；如下圖4、選中【完成】按鈕，添加【鼠標(biāo)單擊時】，設(shè)置動態(tài)面板狀態(tài)為【編輯頁面】，選中【取消】按鈕，設(shè)置【鼠標(biāo)單擊時】，隱藏該動態(tài)面板5、進(jìn)入動態(tài)面板中的編輯頁面，選中文本框，屬性面板輸入提示文字為“這一刻的想法”，同時設(shè)置提示樣式6、選中編輯頁面中的【取消】按鈕，設(shè)置【鼠標(biāo)單擊時】，顯示組合【確認(rèn)彈框】，燈箱效果7、設(shè)置，點擊【不保留】，隱藏【確認(rèn)彈框】