中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

先看看效果

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

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

詳細制作步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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