Axure中繼器應(yīng)用實例:如何設(shè)計商品信息列表?
文章通過設(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)載。
設(shè)置圖片的時候,旁邊就沒有l(wèi)ist 這個中繼器了,咋回事呢?求解一下,謝謝。
要在中繼器里加一個圖片的元件
嗯嗯,果然。謝謝大神!
請教一個問題,如果繼續(xù)往下做一層,做出商品詳情頁的話,還能用同一個中繼器實現(xiàn)嗎?
可以的,中繼器里面加一列或者幾列商品詳情的數(shù)據(jù),加一個動態(tài)面板,動態(tài)面板的內(nèi)容再加載商品詳情數(shù)據(jù),然后隱藏面板,點擊顯示就OK了