編輯導(dǎo)讀：中繼器是axure的重要組件，可以很好地模擬數(shù)據(jù)庫增刪改查的操作。本文以網(wǎng)紅年糕展示頁面為例，介紹中繼器模擬某寶商品展示欄的詳細(xì)步驟，希望對你有幫助。

本文以某寶熱搜第二名的網(wǎng)紅年糕展示頁面為例（好有食欲看餓了），首先分析一下每條信息的組成，可以看到是由商品圖片、商品名稱、凈含量、價格、付款人數(shù)、店鋪名稱/發(fā)貨地點、購物車圖標(biāo)組成，根據(jù)這些組件先來搭建中繼器。

第一步，拖拽一個中繼器組件，單擊進(jìn)入中繼器頁面。

第二步，刪除中繼器的默認(rèn)矩形組件，按照淘寶信息的組成搭建各元件。首先拖拽圖片元件、尺寸170*170，命名為商品圖片；拖拽文本標(biāo)簽、命名為商品名稱；拖拽文本標(biāo)簽，命名為凈含量，字體設(shè)置為12號、顏色設(shè)置為CCCCCC；拖拽文本標(biāo)簽，命名為價格、字體顏色FF0000；付款人數(shù)文本標(biāo)簽、顏色CCCCCC；店鋪名稱文本標(biāo)簽，字體12、顏色CCCCCC；購物車圖標(biāo)尺寸20*20、命名為購物車圖標(biāo)。

整體布局如圖所示：

第三步，為中繼器添加數(shù)據(jù)，由于axure中繼器添加數(shù)據(jù)非常麻煩，可以在excel中建號數(shù)據(jù)后復(fù)制粘貼過來，excel中數(shù)據(jù)設(shè)計如下圖所示：

Axure中繼器中數(shù)據(jù)顯示:

第四步，數(shù)據(jù)導(dǎo)入后，需要將axure中繼器中數(shù)據(jù)和頁面展示的內(nèi)容綁定起來，以商品名稱為例：

單擊每項加載時，添加動作如下：設(shè)置文本->勾選商品名稱->單擊fx->插入變量或函數(shù)->選擇Item.name，其他文本標(biāo)簽也同樣和中繼器中數(shù)據(jù)content、price、sale、location一一對應(yīng)起來。

文本框和中繼器中數(shù)據(jù)一一對應(yīng)后顯示如下：

接下來要做的是把圖片添加到中繼器中。首先右鍵單擊需要導(dǎo)入圖片的位置，如下圖紅框所示，右鍵單擊后選擇導(dǎo)入圖片，即可實現(xiàn)中繼器中導(dǎo)入圖片。同樣道理，在icon位置導(dǎo)入購物車圖標(biāo)。

和文本一樣，中繼器中導(dǎo)入圖片后，需要進(jìn)行關(guān)聯(lián)操作在頁面中展示出來。為交互<每項加載時>添加用例，單擊設(shè)置圖片->勾選購物車圖標(biāo)->Default選擇值->單擊fx->插入變量或函數(shù)->選擇中繼器中數(shù)據(jù)Item.icon。商品圖片的關(guān)聯(lián)操作同上。

單擊發(fā)布預(yù)覽一下效果，一個簡單的用中繼器模擬淘寶商品列表的頁面就做好啦，醬醬！

總結(jié)一下容易出現(xiàn)錯誤的地方，首先以上操作都是在中繼器頁面進(jìn)行的，這個不要搞錯；其次中繼器的列名是英文單詞命名，如果是中文的話會出錯。這個頁面比較簡單，容易出錯的地方也就這些，非常適合中繼器入門學(xué)習(xí)，中繼器的應(yīng)用還是很多的，下次來一起用中繼器做穿梭框吧！

本文由 @產(chǎn)品小白黑化中 原創(chuàng)首發(fā)于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議