Axure中繼器應用實例:如何設計商品信息列表?
文章通過設計商品信息列表的實例,簡單介紹了中繼器的使用方法,一起來學下。
一、概念解析
Axure部件Repeater,一直覺得這個單詞用的很形象,是使一條條數據在頁面上重復顯示(repeat)的部件,因此叫repeater,所以每當需要將數據條目顯示在頁面上時,很容易想到要使用repeater。
在中文版中,repeater部件被翻譯成為中繼器,所謂“中繼”的含義更廣,不光是把數據在頁面上顯示的“中繼”,也是可以對數據進行操作的“中繼”。
因此,中繼器大體上有兩部分功能,數據顯示和數據存儲:
- 在數據顯示方面,和其他部件一樣,可以直接對其布局,例如是行還是列,是條目還是卡片,是否要分頁,顯示的風格樣式等。
- 在數據庫方面,中繼器提供了最基本的增,減,改,查,以及排序功能,這些功能在axure動作里面都有提供。
中繼器是在Axure RP7.0開始加入的,通常用來顯示一些列表信息,如商品列表、用戶信息列表等。中繼器中有兩個概念需要大家了解,數據集、項:
- 數據集:中繼器里存放的數據,可以使文本、頁面鏈接或圖片。比如所有的商品信息數據。
- 項:中繼器里重復顯示的內容,比如商品信息列表中,要顯示n次商品的名稱、圖片、價格等等這些內容。
二、應用實例
下面通過設計商品信息列表的實例,來介紹中繼器的使用方法:
我們先做三列數據看看效果:商品名、價格、購買時間。
1.拖入一個中繼器元件,命名為list。雙擊該中繼器,進入到中繼器設計區域,設計區域中的元件就是中繼器的項,也就是要重復顯示的內容,它默認顯示了一個矩形。如下圖:
2.一共拖入三個矩形分別命名為name、price、date,在右側的中繼器數據集中,把第一列重命名為name,新建兩列分別命名為price、date,注意數據集中的列名和元件名可以不同,在數據集中填充數據,如下圖。
3.把數據集內容和中繼器的項綁定,雙擊每項加載時Case 1,設置三個矩形的文字對應為中繼器的列名,如下圖:
4.預覽效果
5.下面我們再繼續來做另一種效果
這種效果不是傳統的幾行幾列的表格形式,這種效果怎么做呢?大家思考一下,中繼器是用來存放數據的,至于它顯示出來的樣子,是由“中繼器的項”的排版所決定的,所以我們還是先把數據存進去,當然還是在中繼器數據集中新建幾列,填充數據即可。注意添加圖片的方法是:在對應的列下面右鍵-導入圖片-選擇圖片即可。
接下來我們雙擊中繼器,進入設計區域,拖入要重復顯示的元件,并命名,按照上面的方法把文字元件和數據集綁定。綁定圖片的方法是:雙擊每項加載時-設置圖片-選擇圖片列-選擇default下拉框中的“值”-點擊fx選擇中繼器中的圖片列。
關閉設計區域,預覽效果。
歡迎關注我的公眾號:yeemoon
本文由 @PM-joe 原創發布于人人都是產品經理。未經許可,禁止轉載。
設置圖片的時候,旁邊就沒有list 這個中繼器了,咋回事呢?求解一下,謝謝。
要在中繼器里加一個圖片的元件
嗯嗯,果然。謝謝大神!
請教一個問題,如果繼續往下做一層,做出商品詳情頁的話,還能用同一個中繼器實現嗎?
可以的,中繼器里面加一列或者幾列商品詳情的數據,加一個動態面板,動態面板的內容再加載商品詳情數據,然后隱藏面板,點擊顯示就OK了