文章通過設(shè)計(jì)商品信息列表的實(shí)例，簡單介紹了中繼器的使用方法，一起來學(xué)下。

一、概念解析

Axure部件Repeater，一直覺得這個(gè)單詞用的很形象，是使一條條數(shù)據(jù)在頁面上重復(fù)顯示（repeat）的部件，因此叫repeater，所以每當(dāng)需要將數(shù)據(jù)條目顯示在頁面上時(shí)，很容易想到要使用repeater。

在中文版中，repeater部件被翻譯成為中繼器，所謂“中繼”的含義更廣，不光是把數(shù)據(jù)在頁面上顯示的“中繼”，也是可以對(duì)數(shù)據(jù)進(jìn)行操作的“中繼”。

因此，中繼器大體上有兩部分功能，數(shù)據(jù)顯示和數(shù)據(jù)存儲(chǔ)：

• 在數(shù)據(jù)顯示方面，和其他部件一樣，可以直接對(duì)其布局，例如是行還是列，是條目還是卡片，是否要分頁，顯示的風(fēng)格樣式等。
• 在數(shù)據(jù)庫方面，中繼器提供了最基本的增，減，改，查，以及排序功能，這些功能在axure動(dòng)作里面都有提供。

中繼器是在Axure RP7.0開始加入的，通常用來顯示一些列表信息，如商品列表、用戶信息列表等。中繼器中有兩個(gè)概念需要大家了解，數(shù)據(jù)集、項(xiàng)：

• 數(shù)據(jù)集：中繼器里存放的數(shù)據(jù)，可以使文本、頁面鏈接或圖片。比如所有的商品信息數(shù)據(jù)。
• 項(xiàng)：中繼器里重復(fù)顯示的內(nèi)容，比如商品信息列表中，要顯示n次商品的名稱、圖片、價(jià)格等等這些內(nèi)容。

二、應(yīng)用實(shí)例

下面通過設(shè)計(jì)商品信息列表的實(shí)例，來介紹中繼器的使用方法：

我們先做三列數(shù)據(jù)看看效果：商品名、價(jià)格、購買時(shí)間。

1.拖入一個(gè)中繼器元件，命名為list。雙擊該中繼器，進(jìn)入到中繼器設(shè)計(jì)區(qū)域，設(shè)計(jì)區(qū)域中的元件就是中繼器的項(xiàng)，也就是要重復(fù)顯示的內(nèi)容，它默認(rèn)顯示了一個(gè)矩形。如下圖：

2.一共拖入三個(gè)矩形分別命名為name、price、date，在右側(cè)的中繼器數(shù)據(jù)集中，把第一列重命名為name，新建兩列分別命名為price、date，注意數(shù)據(jù)集中的列名和元件名可以不同，在數(shù)據(jù)集中填充數(shù)據(jù)，如下圖。

3.把數(shù)據(jù)集內(nèi)容和中繼器的項(xiàng)綁定，雙擊每項(xiàng)加載時(shí)Case 1，設(shè)置三個(gè)矩形的文字對(duì)應(yīng)為中繼器的列名，如下圖：

4.預(yù)覽效果

5.下面我們?cè)倮^續(xù)來做另一種效果

這種效果不是傳統(tǒng)的幾行幾列的表格形式，這種效果怎么做呢？大家思考一下，中繼器是用來存放數(shù)據(jù)的，至于它顯示出來的樣子，是由“中繼器的項(xiàng)”的排版所決定的，所以我們還是先把數(shù)據(jù)存進(jìn)去，當(dāng)然還是在中繼器數(shù)據(jù)集中新建幾列，填充數(shù)據(jù)即可。注意添加圖片的方法是：在對(duì)應(yīng)的列下面右鍵-導(dǎo)入圖片-選擇圖片即可。

接下來我們雙擊中繼器，進(jìn)入設(shè)計(jì)區(qū)域，拖入要重復(fù)顯示的元件，并命名，按照上面的方法把文字元件和數(shù)據(jù)集綁定。綁定圖片的方法是：雙擊每項(xiàng)加載時(shí)-設(shè)置圖片-選擇圖片列-選擇default下拉框中的“值”-點(diǎn)擊fx選擇中繼器中的圖片列。

關(guān)閉設(shè)計(jì)區(qū)域，預(yù)覽效果。

歡迎關(guān)注我的公眾號(hào)：yeemoon

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