axure中繼器解析

今天爲大家介紹axure工具中一個非常強大的元件——中繼器。中繼器是在Axure RP7.0開始加入的,可以用來“存放”文本、圖片、鏈接等數據,可以把它理解成爲一個虛擬的數據庫。中繼器通常用來顯示一些列表信息,如商品列表、用戶信息列表等。


中繼器中有兩個概念需要大家瞭解:數據集、項。

  • 數據集:中繼器裏存放的數據,可以使文本、頁面鏈接或圖片。比如所有的商品信息數據。

  • 項:中繼器裏重複顯示的內容,比如商品信息列表中,要顯示n次商品的名稱、圖片、價格等等這些內容。


下面介紹使用方法:

拖入一箇中繼器元件,命名爲list。雙擊該中繼器,進入到中繼器設計區域,設計區域中的元件就是中繼器的項,也就是要重複顯示的內容,它默認顯示了一個矩形。我們先做三列數據看看效果:商品名、價格、購買時間。

  1. 一共拖入三個矩形分別命名爲name、price、date。

  2. 在右側的中繼器數據集中,把第一列重命名爲name,新建兩列分別命名爲price、date,注意數據集中的列名和元件名可以不同。

  3. 在數據集中填充數據,如下圖。

wKioL1jTZSSCrV6wAACaDVuujs0588.png-wh_50

  4.把數據集內容和中繼器的項綁定,雙擊每項加載時,設置三個矩形的文字對應爲中繼器的列名。

wKiom1jTZamx8pktAADDeH56z8k827.png-wh_50

wKiom1jTZarTZPu6AAAZslt90uE106.png-wh_50

5. 關閉中繼器設計區域,預覽效果。

wKioL1jTZdbwL3L8AAAV3U0GQzs292.png-wh_50


我們再看一種效果:

wKiom1jUdDugSFNGAAGz8dyM54o404.png-wh_50

這種效果不是傳統的幾行幾列的表格形式,這種效果怎麼做呢?大家思考一下,中繼器是用來存放數據的,至於它顯示出來的樣子,是由“中繼器的項”的排版所決定的,所以我們還是先把數據存進去,當然還是在中繼器數據集中新建幾列,填充數據即可。注意添加圖片的方法是:在對應的列下面右鍵-導入圖片-選擇圖片即可。

wKioL1jUdNbhudsJAAAn-qWaEyw388.png-wh_50

wKiom1jUdNeAZ8l7AAAwstAX6pA338.png-wh_50

接下來我們雙擊中繼器,進入設計區域,拖入要重複顯示的元件,並命名,按照上面的方法把文字元件和數據集綁定。綁定圖片的方法是:雙擊每項加載時-設置圖片-選擇圖片列-選擇default下拉框中的“值”-點擊fx選擇中繼器中的圖片列。

wKiom1jUdb7xivyOAAAcyRPs0lQ628.png-wh_50

wKioL1jUdb_BLAFGAADU8W_Zx50505.png-wh_50


關閉設計區域,預覽效果,完美~~


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章