中繼器——Axure中複雜的元件，沒有之一。中繼器是Axure中最強大的元件，通常用於頁面效果展示時使用。但對於新手小白來說，這個元件的使用不是那麼的友好，學習成本較高……在本文中，將對中繼器的基礎和簡單的使用包括數據展示、新增、刪除功能的實現進行詳細講解，希望能幫助你更好的理解中繼器~
目錄：
中繼器是什麼中繼器什麼時候用怎麼使用中繼器（包括各模塊與基本使用流程介紹）基礎應用1——表單數據集展示基礎應用2——PC端表單數據新增基礎應用3——PC端表單數據刪除
中繼器是什麼
中繼器（repeater）英文為「重複」的意思，在Axure中可以理解為重複的使用同一個模板，通過向行列數據矩陣中進行數據處理後展示的小型資料庫。
（由於這個是原型而不是真的資料庫沒有進行存儲，因此通過演示處理的數據不會真正的進行存儲）
中繼器什麼時候用
在日常文檔與原型說明中，由於不需要動態演示，進行原型說明即可，所以較少使用。
在特殊場景，如跟老闆演示，需要進行頁面效果展示時則需要使用該元件。
具體用處：
通過了解中繼器的使用，可以了解資料庫、函數、變量的基本概念，拓展知識。PC端/移動端列表展示統一模板。動態交互包括列表新增、刪除、修改、查詢等，可以通過動態交互實現。
怎麼使用中繼器
使用模塊介紹：
主要分三個部分，包括：中繼器、「資料庫」、交互設置。
中繼器：設置該模塊的模板樣式；「資料庫」：設置中繼器中需要展示的數據數量與內容；交互設置：主要進行中繼器與「資料庫」的關聯處理等操作。下圖中包括各模塊位置與對應使用流程順序：
基礎應用——表單數據集展示
關聯數據展示為中繼器最簡單的使用方式，我們先來看下完成效果。
實現流程：開始–>在中繼器中繪製模板–>展示表格美化–>對「資料庫」列數據進行命名–>數據錄入–>關聯模板元件與資料庫列數據–>完成。
（1）拖入中繼器，進入編輯中繼器模板與對應模板命名
設置中繼器單條數據的模板，後續在「資料庫」中增加多條數據都會應用同一個模板進行重複，對應模板中使用的元件進行命名，是為了後續關聯展示數據的元件與資料庫的「列」時方便查找對應元件
Tips：如果有通用的功能，即所有數據都有，如刪除、複選框，可在模板直接放置。（後續不進行關聯則所有數據都展示）
（2）對展示表格進行美化、對「資料庫」列數據進行命名與數據錄入
1條數據為單條數據，多行則為重複使用多次模板的多條數據，如錄入2行則重複2次模板展示；錄入3行則重複3次模板展示。
（3）將中繼器模板元件與「資料庫」關聯，展示資料庫的數據
在交互設置中，選擇【Onitemload（每項加載時）】，雙擊進入設置關聯內容；選擇Set Text（設置文字），勾選中繼器的模板元件對應設置為「資料庫」中的對應「列」，具體演示如下圖所示。
以上操作做完後，即可達到完成效果拉，後續需要增加數據直接在「資料庫」中增加就可以啦~
與PC端表單使用同樣的方法進行移動端的頁面繪製：
移動端模仿淘寶頁面進行繪製，以下為完成效果。其中商品列表部分是使用中繼器進行繪製，繪製的方法與pc端基本相同，下面對不同點進行說明。
不同點：圖片導入。
若需要使用圖片，第一步：則在「資料庫」中對應數據點擊右鍵選擇【Import Image（導入圖片）import制器最基礎的方便後續對數據處理的】進行本地圖片選擇。
第二步：對中繼器進行交互設置，選擇【Onitemload（每項加載時）】，雙擊進入設置關聯內容；選擇Set image（設置圖片），勾選中繼器模板中需要展示圖片的元件對應設置為「資料庫」中的對應「列」後，保存即可，具體演示如下圖所示。
基礎應用2——PC端表單數據新增
完成效果圖：
實現流程：開始–>建立中繼器與對應資料庫關聯關係–>繪製新增框–>對「添加」按鈕設置交互實現資料庫賦值–>完成。
（1）建立中繼器與對應資料庫的關聯關係
該部分已經在上文【基礎應用1——表單數據集展示】部分已經講過，這裡不再細說。
（2）繪製新增框
使用基礎常用的元件包括輸入框、單選框、文本框等進行繪製，並對填寫文本框、選擇框等進行命名（方便後續進行關聯時候查找）。
（3）對「添加」按鈕設置交互實現資料庫賦值
通過使用局部變量獲取文本框中輸入的內容對資料庫進行賦值，具體操作如下圖。
（4）其他操作
以上操作完成後，你已經基本掌握了新增列的知識，但是還不能到達所展示的完成效果，還需幾點操作。
1）實現點擊「+添加」彈出新增彈框效果
2）實現點擊添加關閉新增彈窗效果
3）序號：實現自動添加序號
若要實現在新增時，不填寫序號自動添加序號，則需要在進行中繼器與資料庫關聯時關聯對應函數進行賦值處理即可。
如下圖：
4）提交時間：實現自動獲取系統當前時間
要實現新增時，不填寫提交時間自動獲取當前時間，實現方法與【實現自動添加序號】一樣，都需要關聯函數，具體實現方式看下圖。
5）單選框賦值：實現通過全局變量賦值的方式對所選的單選進行賦值（這部分稍微有點難度）
設置在選中「是（否）」時，取消選擇「否（是）」，後將單選框中的文字「是（否）」賦值給全局變量，在對新增彈框的「添加」按鈕設置賦值時賦值對應的全局變量即可。
基礎應用3——PC端表單數據刪除
完成效果圖：
單條刪除實現流程：開始–>進入中繼器–>對刪除按鈕設置點擊後刪除行事件–>完成批量刪除實現流程：開始–>進入中繼器–>對複選框設置標記事件–>回到頁面–>對批量刪除按鈕設置刪除標記行事件–>完成1）單條刪除：進入中繼器後對刪除按鈕設置點擊後刪除行事件即可，具體操作見下圖。
2）批量刪除：先對複選框設置標記事件，後對刪除按鈕進行刪除標記行事件即可，具體操作見下圖：
簡單的中繼器數據集使用也可以提升原型繪製效率喲，簡單酷炫的新增刪除操作，你學會了嗎？
本文由 @小樹懶 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議