編輯導讀：中繼器是axure的重要組件，可以很好地模擬資料庫增刪改查的操作。本文以網紅年糕展示頁面為例，介紹中繼器模擬某寶商品展示欄的詳細步驟，希望對你有幫助。
本文以某寶熱搜第二名的網紅年糕展示頁面為例（好有食慾看餓了），首先分析一下每條信息的組成，可以看到是由商品圖片、商品名稱、淨含量、價格、付款人數、店鋪名稱/發貨地點、購物車圖標組成，根據這些組件先來搭建中繼器。
第一步，拖拽一個中繼器組件，單擊進入中繼器頁面。
第二步，刪除中繼器的默認矩形組件，按照淘寶信息的組成搭建各元件。首先拖拽圖片元件、尺寸170*170，命名為商品圖片；拖拽文本標籤、命名為商品名稱；拖拽文本標籤，命名為淨含量，字體設置為12號、顏色設置為CCCCCC；拖拽文本標籤，命名為價格、字體顏色FF0000；付款人數文本標籤、顏色CCCCCC；店鋪名稱文本標籤，字體12、顏色CCCCCC；購物車圖標尺寸20*20、命名為購物車圖標。
整體布局如圖所示：
第三步，為中繼器添加數據，由於axure中繼器添加數據非常麻煩，可以在excel中建號數據後複製粘貼過來，excel中數據設計如下圖所示：
Axure中繼器中數據顯示:
第四步，數據導入後，需要將axure中繼器中數據和頁面展示的內容綁定起來，以商品名稱為例：
單擊每項加載時，添加動作如下：設置文本->勾選商品名稱->單擊fx->插入變量或函數->選擇Item.name，其他文本標籤也同樣和中繼器中數據content、price、sale、location一一對應起來。
文本框和中繼器中數據一一對應後顯示如下：
接下來要做的是把圖片添加到中繼器中。首先右鍵單擊需要導入圖片的位置，如下圖紅框所示，右鍵單擊後選擇導入圖片，即可實現中繼器中導入圖片。同樣道理，在icon位置導入購物車圖標。
和文本一樣，中繼器中導入圖片後，需要進行關聯操作在頁面中展示出來。為交互<每項加載時>添加用例，單擊設置圖片->勾選購物車圖標->Default選擇值->單擊fx->插入變量或函數->選擇中繼器中數據Item.icon。商品圖片的關聯操作同上。
單擊發布預覽一下效果，一個簡單的用中繼器模擬淘寶商品列表的頁面就做好啦，醬醬！
總結一下容易出現錯誤的地方，首先以上操作都是在中繼器頁面進行的，這個不要搞錯；其次中繼器的列名是英文單詞命名，如果是中文的話會出錯。這個頁面比較簡單，容易出錯的地方也就這些，非常適合中繼器入門學習，中繼器的應用還是很多的，下次來一起用中繼器做穿梭框吧！
本文由 @產品小白黑化中 原創首發於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議