這兩天，通過網(wǎng)絡(luò)資料以及公司大牛的傾情幫助，終于學(xué)會了Axure中繼器功能，并試著做了一個可交互的“App音樂播放列表頁”，并把步驟詳細(xì)分享給大家，希望對大家有幫助。

先看看效果

點擊每首歌曲，首先小喇叭會變亮，表示當(dāng)前播放音樂，且頁面底部播放臺同時切換到此歌曲。

http://kb1mel.axshare.com? ?（打開有點慢，請見諒哦）

詳細(xì)制作步驟

一、首先畫一個大體的頁面框架，頁面尺寸為320*568（可以自定義），如下圖所示：

二、接下來，我們要制作歌曲列表，因為每首歌曲的排版樣式都是一致的，所以我們想到可以用Axure中繼器來實現(xiàn)重復(fù)項目列表的繪制。詳細(xì)步驟如下：

2.1從元件庫拖一個中繼器到頁面，命名為MusicList，如下圖：

1.垂直和水平規(guī)定中繼器各項目列表的排布方式，例子中是垂直排布；選中排布，可以設(shè)置每列最多項目數(shù)，比如我們設(shè)了4個，意思就是垂直一列最多排4個項目，多的就得另起一列排布。

2.間距可以設(shè)置項目之間的行距和列距。大家可以嘗試的點擊試試看）

2.2鼠標(biāo)雙擊中繼器，進(jìn)入模板編輯頁面，設(shè)置模板尺寸為320*65，“Moon Light”命名為“MusicName”，“Capo Probuction – Serenity”命名為“PeopleName”如下圖所示（命名是為了對應(yīng)數(shù)據(jù)集，后面會使用到）

回到框架頁面，你會發(fā)現(xiàn)變成這樣了：

插個小曲，可以繼續(xù)添加項目列，如下圖（雙擊“添加行”，輸入4，然后在外面點擊下就可以添加1行，注意之前設(shè)置的最多項目數(shù)問題）

2.3建立數(shù)據(jù)集，我們把這個數(shù)據(jù)集也對應(yīng)設(shè)置兩列內(nèi)容，標(biāo)題分別是MusicName和PeopleName（可以自定義，不需要和模板中的一樣），下面的內(nèi)容根據(jù)需要也一并填入。（雙擊可填入）如下圖：

接下來，選中中繼器，設(shè)置每項加載時，模板中MusicName值為數(shù)據(jù)集中[[Item.MusicName]]，PeopleName值為[[Item.PeopleName]]，（“[[Item.MusicName]]”可以直接輸入，也可以通過點擊【fx】圖標(biāo)，在彈出的編輯界面中，點擊【插入變量或函數(shù)…】）如下圖所示：

得到的效果如下圖所示，每項的內(nèi)容和數(shù)據(jù)集對應(yīng)起來了。

2.4雙擊中繼器打開模板，首先設(shè)置喇叭選中狀態(tài)為紅色（喇叭用的是字體圖標(biāo)，可以設(shè)置選中狀態(tài)），然后設(shè)置點擊模板中的任意處喇叭選中狀態(tài)為“Ture”，如下圖所示

不要勾選“取消[選項]組效果”,然后把模板中的喇叭右鍵單擊設(shè)置[選項]組并且命名，這樣就可以實現(xiàn)單擊歌曲實現(xiàn)唯一選中項了。

三、根據(jù)上面的方法，再建立一個中繼器MusicPlay作為播放臺，只要1列就可以了，模板中內(nèi)容命名為MusicName1和PeopleName1，同時值為[[Item.MusicName1]]和[[Item.PeopleName1]]

四、實現(xiàn)單擊歌曲，喇叭變紅，且播發(fā)臺同時切換此歌曲，打開歌曲列表模板，設(shè)置喇叭選中時，執(zhí)行“中繼器MusicPlay更新行”命令，將中繼器MusicPlay中的MusicName1更新為中繼器MusicList中的[[Item.MusicName]]，將中繼器MusicPlay中的PeopleName1更新為中繼器MusicList中的[[Item.PeopleName]]：

這時，需要一個條件，即中繼器MusicPlay滿足[[TargetItem.xx==’xx’]]這個條件時，才會更新為中繼器MusicList點擊項目的內(nèi)容，因為MusicName1和PeopleName1的值都是根據(jù)點擊中繼器MusicList實時變化的，所以不能當(dāng)條件，所以在中繼器MusicPlay數(shù)據(jù)集加一列不變的，可以命名為Condition，內(nèi)容為Ture，當(dāng)做項目的屬性。

即當(dāng)[[TargetItem.Conditon==’Ture’]]，喇叭變紅時，中繼器MusicPlay中的MusicName1更新為中繼器MusicList中的[[Item.MusicName]]，將中繼器MusicPlay中的PeopleName1更新為中繼器MusicList中的[[Item.PeopleName]]

點擊“確定”，生成Html預(yù)覽下效果吧。

大家最好在做的時候，一邊做一遍思考，因為軟件的學(xué)習(xí)要深入，不是只會這一個案例就可以掌握中繼器的，還是要多練習(xí)多思考，有什么問題，大家可以一起交流學(xué)習(xí)呀。

本文由 @ 逗比交互 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。