中繼器——Axure中復雜的元件，沒有之一。中繼器是Axure中最強大的元件，通常用于頁面效果展示時使用。但對于新手小白來說，這個元件的使用不是那么的友好，學習成本較高……在本文中，將對中繼器的基礎和簡單的使用包括數據展示、新增、刪除功能的實現(xiàn)進行詳細講解，希望能幫助你更好的理解中繼器~

目錄：

• 中繼器是什么
• 中繼器什么時候用
• 怎么使用中繼器（包括各模塊與基本使用流程介紹）
• 基礎應用1——表單數據集展示
• 基礎應用2——PC端表單數據新增
• 基礎應用3——PC端表單數據刪除

中繼器是什么

中繼器（repeater）英文為“重復”的意思，在Axure中可以理解為重復的使用同一個模板，通過向行列數據矩陣中進行數據處理后展示的小型數據庫。

（由于這個是原型而不是真的數據庫沒有進行存儲，因此通過演示處理的數據不會真正的進行存儲）

中繼器什么時候用

在日常文檔與原型說明中，由于不需要動態(tài)演示，進行原型說明即可，所以較少使用。

在特殊場景，如跟老板演示，需要進行頁面效果展示時則需要使用該元件。

具體用處：

• 通過了解中繼器的使用，可以了解數據庫、函數、變量的基本概念，拓展知識。
• PC端/移動端列表展示統(tǒng)一模板。
• 動態(tài)交互包括列表新增、刪除、修改、查詢等，可以通過動態(tài)交互實現(xiàn)。

怎么使用中繼器

使用模塊介紹：

主要分三個部分，包括：中繼器、“數據庫”、交互設置。

1. 中繼器：設置該模塊的模板樣式；
2. “數據庫”：設置中繼器中需要展示的數據數量與內容；
3. 交互設置：主要進行中繼器與“數據庫”的關聯(lián)處理等操作。

下圖中包括各模塊位置與對應使用流程順序：

基礎應用——表單數據集展示

關聯(lián)數據展示為中繼器最簡單的使用方式，我們先來看下完成效果。

實現(xiàn)流程：開始–>在中繼器中繪制模板–>展示表格美化–>對“數據庫”列數據進行命名–>數據錄入–>關聯(lián)模板元件與數據庫列數據–>完成。

（1）拖入中繼器，進入編輯中繼器模板與對應模板命名

設置中繼器單條數據的模板，后續(xù)在“數據庫”中增加多條數據都會應用同一個模板進行重復，對應模板中使用的元件進行命名，是為了后續(xù)關聯(lián)展示數據的元件與數據庫的“列”時方便查找對應元件

Tips：如果有通用的功能，即所有數據都有，如刪除、復選框，可在模板直接放置。（后續(xù)不進行關聯(lián)則所有數據都展示）

（2）對展示表格進行美化、對“數據庫”列數據進行命名與數據錄入

1條數據為單條數據，多行則為重復使用多次模板的多條數據，如錄入2行則重復2次模板展示；錄入3行則重復3次模板展示。

（3）將中繼器模板元件與“數據庫”關聯(lián)，展示數據庫的數據

在交互設置中，選擇【Onitemload（每項加載時）】，雙擊進入設置關聯(lián)內容；選擇Set Text（設置文字），勾選中繼器的模板元件對應設置為“數據庫”中的對應“列”，具體演示如下圖所示。

以上操作做完后，即可達到完成效果拉，后續(xù)需要增加數據直接在“數據庫”中增加就可以啦~

與PC端表單使用同樣的方法進行移動端的頁面繪制：

移動端模仿淘寶頁面進行繪制，以下為完成效果。其中商品列表部分是使用中繼器進行繪制，繪制的方法與pc端基本相同，下面對不同點進行說明。

不同點：圖片導入。

若需要使用圖片，第一步：則在“數據庫”中對應數據點擊右鍵選擇【Import Image（導入圖片）import制器最基礎的方便后續(xù)對數據處理的】進行本地圖片選擇。

第二步：對中繼器進行交互設置，選擇【Onitemload（每項加載時）】，雙擊進入設置關聯(lián)內容；選擇Set image（設置圖片），勾選中繼器模板中需要展示圖片的元件對應設置為“數據庫”中的對應“列”后，保存即可，具體演示如下圖所示。

基礎應用2——PC端表單數據新增

完成效果圖：

實現(xiàn)流程：開始–>建立中繼器與對應數據庫關聯(lián)關系–>繪制新增框–>對“添加”按鈕設置交互實現(xiàn)數據庫賦值–>完成。

（1）建立中繼器與對應數據庫的關聯(lián)關系

該部分已經在上文【基礎應用1——表單數據集展示】部分已經講過，這里不再細說。

（2）繪制新增框

使用基礎常用的元件包括輸入框、單選框、文本框等進行繪制，并對填寫文本框、選擇框等進行命名（方便后續(xù)進行關聯(lián)時候查找）。

（3）對“添加”按鈕設置交互實現(xiàn)數據庫賦值

通過使用局部變量獲取文本框中輸入的內容對數據庫進行賦值，具體操作如下圖。

（4）其他操作

以上操作完成后，你已經基本掌握了新增列的知識，但是還不能到達所展示的完成效果，還需幾點操作。

1）實現(xiàn)點擊“+添加”彈出新增彈框效果

2）實現(xiàn)點擊添加關閉新增彈窗效果

3）序號：實現(xiàn)自動添加序號

若要實現(xiàn)在新增時，不填寫序號自動添加序號，則需要在進行中繼器與數據庫關聯(lián)時關聯(lián)對應函數進行賦值處理即可。

如下圖：

4）提交時間：實現(xiàn)自動獲取系統(tǒng)當前時間

要實現(xiàn)新增時，不填寫提交時間自動獲取當前時間，實現(xiàn)方法與【實現(xiàn)自動添加序號】一樣，都需要關聯(lián)函數，具體實現(xiàn)方式看下圖。

5）單選框賦值：實現(xiàn)通過全局變量賦值的方式對所選的單選進行賦值（這部分稍微有點難度）

設置在選中“是（否）”時，取消選擇“否（是）”，后將單選框中的文字“是（否）”賦值給全局變量，在對新增彈框的“添加”按鈕設置賦值時賦值對應的全局變量即可。

基礎應用3——PC端表單數據刪除

完成效果圖：

• 單條刪除實現(xiàn)流程：開始–>進入中繼器–>對刪除按鈕設置點擊后刪除行事件–>完成
• 批量刪除實現(xiàn)流程：開始–>進入中繼器–>對復選框設置標記事件–>回到頁面–>對批量刪除按鈕設置刪除標記行事件–>完成

1）單條刪除：進入中繼器后對刪除按鈕設置點擊后刪除行事件即可，具體操作見下圖。

2）批量刪除：先對復選框設置標記事件，后對刪除按鈕進行刪除標記行事件即可，具體操作見下圖：

簡單的中繼器數據集使用也可以提升原型繪制效率喲，簡單酷炫的新增刪除操作，你學會了嗎？

作者：小樹懶，正在努力提升自己的小辣雞，公眾號：瘋子家的樹懶

本文由 @小樹懶 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

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