中繼器，從物理層面是一個(gè)實(shí)體工具，可以作為局域網(wǎng)所有節(jié)點(diǎn)的中心，放大信號，增強(qiáng)遠(yuǎn)距離的通信，把不同傳輸介質(zhì)的網(wǎng)絡(luò)連在一起。
而在Axure軟件中，中繼器英文是“Repeater”，直譯為“重復(fù)器”，但漢化者并沒有使用，而是采用中繼器這個(gè)更專業(yè)的詞匯。
這樣翻譯其實(shí)很有道理，中繼器也相當(dāng)于一種媒介，把外界信息收集起來，再實(shí)現(xiàn)包括基礎(chǔ)數(shù)據(jù)、操作、操作后的效果。
例如我們常見的增刪改功能、排序篩選等，其本質(zhì)就是對數(shù)據(jù)的重復(fù)操作。增加數(shù)據(jù)就是重復(fù)再顯示一次，刪除數(shù)據(jù)就是把重復(fù)效果去掉，這樣一想，我們就更容易理解中繼器到底在做什么了。
本文的思路仍然是從基礎(chǔ)理論說起，再講常用效果的實(shí)現(xiàn)思路。
一、原理與屬性與樣式
既然中繼器最本質(zhì)的特點(diǎn)是repeat，那么我們先搞清楚它是如何重復(fù)的？重復(fù)的規(guī)律是什么？
拖入一個(gè)中繼器，重點(diǎn)看屬性和樣式，如下圖紅圈
1.1 中繼器屬性
在前文中已經(jīng)比對過矩形、動態(tài)面板、熱區(qū)的屬性，每類元件都有其特有的交互用例
中繼器有【每項(xiàng)加載時(shí)】【項(xiàng)目調(diào)整尺寸時(shí)】
● 【每項(xiàng)加載時(shí)】
交互事件中有一個(gè)默認(rèn)Case1，意指將某個(gè)矩形設(shè)置為某個(gè)數(shù)據(jù)。而中繼器數(shù)據(jù)區(qū)域，第一列列名為Column0，下方值顯示為 1/2/3，和中繼器顯示的1/2/3對應(yīng)。添加第二列數(shù)據(jù)后，按照同樣的方式設(shè)置第二列顯示的數(shù)據(jù)為數(shù)據(jù)區(qū)Column1。
因此不難得知如下規(guī)律
1）中繼器屬性區(qū)有N行數(shù)據(jù)，中繼器就重復(fù)N次，每一行數(shù)據(jù)相當(dāng)于一個(gè)項(xiàng)目
2）每行數(shù)據(jù)，也即每個(gè)項(xiàng)目中包含X個(gè)元件，X個(gè)元件對應(yīng)了同一行數(shù)據(jù)中的多列
如上述示例，三行數(shù)據(jù)則中繼器重復(fù)了三次，每1行數(shù)據(jù)包含兩列，每一列和項(xiàng)目中的某個(gè)元件對應(yīng)
● 【項(xiàng)目調(diào)整尺寸時(shí)】
英文原版為 【OnItemResize】，直譯為 【當(dāng)項(xiàng)目尺寸改變時(shí)】，意指當(dāng)每一項(xiàng)目的尺寸發(fā)生變化。那么什么情況才算尺寸發(fā)生變化呢？
項(xiàng)目中發(fā)生【顯示隱藏、移動、旋轉(zhuǎn)、設(shè)置尺寸】都可認(rèn)為尺寸改變，而設(shè)置文字或設(shè)置圖片則不算
1.2 中繼器樣式
● 樣式-布局
分為三種：垂直、水平、網(wǎng)格排布。也就是在中繼器重復(fù)時(shí)，每個(gè)項(xiàng)目是縱向重復(fù)、水平重復(fù)、網(wǎng)格重復(fù)
以下三個(gè)中繼器設(shè)置了完全相同的數(shù)據(jù)和每個(gè)項(xiàng)目的基礎(chǔ)樣式，只是布局方式不同
● 樣式-背景
背景色，設(shè)置了每個(gè)項(xiàng)目的背景色，例如設(shè)置為綠色，則每次重復(fù)時(shí)都會自動加上綠色背景
● 樣式-分頁
分頁，原理和我們常見分頁功能相似，例如通常每頁10條
多頁顯示：數(shù)據(jù)總行數(shù)，超過了每頁顯示的數(shù)量，則勾選
每頁項(xiàng)目數(shù)：設(shè)置5，則每一頁顯示5條數(shù)據(jù)，從第6條開始會顯示到第2頁
起始頁：設(shè)置默認(rèn)開始的頁碼，設(shè)置2，則中繼器默認(rèn)顯示第2頁的數(shù)據(jù)
● 樣式-間距
也即每個(gè)項(xiàng)目之間的間距
如果項(xiàng)目布局是垂直排列，那么設(shè)置行間距，如果項(xiàng)目布局是水平排列，那么設(shè)置列間距，如果是網(wǎng)格排列，可以設(shè)置行和列間距
1.3 中繼器數(shù)據(jù)
能支持的功能有
可直接Ctrl+V粘貼數(shù)據(jù)
可導(dǎo)入圖片
建議這樣設(shè)置來提高效率
事先把圖片放入到同一個(gè)文件夾內(nèi)
事先把基礎(chǔ)數(shù)據(jù)填寫到Excel內(nèi)
事先把項(xiàng)目中元件的名字，和數(shù)據(jù)區(qū)的列名統(tǒng)一
二、初級示例：某網(wǎng)校頁面的課程排列
先找一個(gè)網(wǎng)校打開某類課程的頁面，發(fā)現(xiàn)每一門課程都有相同的屬性，如下截圖
一門課程的屬性分為7個(gè)：圖片、課程名稱、學(xué)校、講師、集數(shù)、類型、簡介
觀察和分析的步驟如下
1、每門課程的屬性都有這些，重復(fù)！————應(yīng)該使用中繼器
2、縱向垂直排列————中繼器的布局方式應(yīng)該選 【垂直】
3、每一行課程中間有間隔————中繼器的間隔應(yīng)該設(shè)置【行間距】，具體值需要測量
4、課程有圖片————中繼器每行數(shù)據(jù)的圖片需要【提前設(shè)置并導(dǎo)入】
5、每門課程的屬性有7個(gè)且不同————中繼器的項(xiàng)目至少有7個(gè)元件，數(shù)據(jù)區(qū)需要7列數(shù)據(jù)，每列列名需要和元件名稱對應(yīng)
按照上面的分析，我們先做三個(gè)課程，也即三行數(shù)據(jù)，具體設(shè)置如下
設(shè)置上圖的最佳步驟是
1、拖入一個(gè)中繼器
2、在基礎(chǔ)屬性中畫好一門課程的所有屬性，并把元件名稱寫為英文
3、在中繼器的數(shù)據(jù)區(qū)，粘貼提前寫好的課程內(nèi)容，并把【列名】修改為【元件名】，均為相同英文名
4、右擊圖片列的單元格，導(dǎo)入圖片
5、Case1中，每項(xiàng)加載時(shí)事件設(shè)置每個(gè)元件的值等于中繼器的列名，再設(shè)置圖片顯示為圖片列名
根據(jù)上面的設(shè)置，預(yù)覽效果如下
以上。
中繼器原理和基本屬性就是文中提到的這些了，但其實(shí)它遠(yuǎn)不止如此，不然怎么會讓我用強(qiáng)大這個(gè)詞來形容它呢，下次再總結(jié)它常用的案例。
— — — — 系 列 目 錄 — — — —
這不是Axure教程?。ㄋ模┰嘏c用例
這不是Axure教程?。ㄎ澹┳兞颗c函數(shù)
這不是Axure教程?。﹦討B(tài)面板之一:屬性和動效
這不是Axure教程?。﹦討B(tài)面板之二:經(jīng)典實(shí)踐
這不是Axure教程?。ㄆ撸?qiáng)大的中繼器__1
— — — — 目? 錄? 完 — — — —
