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

一、概念解析

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

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

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

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

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

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

二、應(yīng)用實例

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

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

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

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

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

4.預覽效果

5.下面我們再繼續(xù)來做另一種效果

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

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

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

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

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