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

目錄：

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

中繼器是什麼

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

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

中繼器什麼時候用

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

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

具體用處：

• 通過了解中繼器的使用，可以了解數據庫、函數、變量的基本概念，拓展知識。
• PC端/移動端列表展示統一模闆。
• 動态交互包括列表新增、删除、修改、查詢等，可以通過動态交互實現。

怎麼使用中繼器

使用模塊介紹：

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

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

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

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

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

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

（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協議