中繼器是Axure中的一個高級元件，可以當做Axure中的小型數(shù)據(jù)庫使用，用于實現(xiàn)一些增刪查改的效果，同時可用于一些具有相同元件組合的組件的快速生成，比如APP中的設置，如下圖所示。下面我們介紹一下怎么用中繼器實現(xiàn)。
中繼器基礎知識
我們先介紹一下中繼器的基礎知識，拖入一個中繼器，可以看到顯示的是縱排的三個矩形框，框中內(nèi)容分為為1,2,3，交互中有一個事件每項加載時，元件動作是設置矩形框的文本為Item.Column0，點擊樣式，可以看到有一個數(shù)據(jù)表格，默認只有一列Column0,列中數(shù)據(jù)為1,2,3。雙擊中繼器，可以看到其中只有一個矩形框。
從中不難看出以下幾點：
1）雙擊進入中繼器后，添加的各種元件相當于中繼器本身的模板，后面會按這個模板進行渲染；
2）模板渲染多少次是由樣式中數(shù)據(jù)表的行數(shù)決定的，比如默認只有三行數(shù)據(jù)，就只生成了三個矩形框；
3）樣式表中的每一行數(shù)據(jù)就是每次渲染時可以傳入模板中的數(shù)據(jù)，數(shù)據(jù)傳入需要通過中繼器的“每項加載時”這個事件進行觸發(fā)設置，比如比如默認的是把Column0這列的數(shù)據(jù)傳給了矩形框。通過增加列，可以增加每次渲染時可以使用的數(shù)據(jù)，列名可以自定義（英文字符）。
最后，數(shù)據(jù)表中的數(shù)據(jù)除了字符串外，通過右鍵還可以引入圖片或則頁面，這個功能非常強大，下面我們將要用到。
有了上面的基礎，我們就可以開始制作了。首先我們要確定一下我們的模板組成，對于不帶圖表的，應該要包含一下元件：
1）一個矩形框，用于規(guī)定模板的邊界大小，同時用于裝載選項的名字，邊框不顯示，元件命名為”選項名“，注意設置文字的左邊距；
2）一個swich切換開關；
3）一個標簽，用于存放右側(cè)的提示文字，命名為”提示文字“，注意選擇右對齊；
4）一個“>”符號；
5）一根直線，放于底邊，作為每行的分隔線，命名為”分隔線“。
如下圖所示，把這幾個元素組合好。
在數(shù)據(jù)表中輸入下面的內(nèi)容，一共四行數(shù)據(jù)，表示我們要生成四個選項。
name表示選項名；
switch為標志位，如果需要使用開關按鈕就填入true，否則不填,為true時后面都不用填；
option是選項右側(cè)的文字，如果不需要則不填；
dayufu為標志位，需要顯示大于符號時填true，與switch不能同時設置；
pageUrl用于引用頁面，對于設置了大于符號的項，一般都要跳轉(zhuǎn)頁面，直接引用該頁面即可。
數(shù)據(jù)和模板都設置好了，下面要控制每一項渲染時的數(shù)據(jù)傳入，首先先設置文字類的數(shù)據(jù)，主要有兩個：
1）把模板中的選項名設置為Item.name;
2）把提示文字設置為Item.option。
通過fx中插入變量，Item表示中繼器本身。
這樣設置以后，顯示如下：
接下來就是控制顯示switch開關還是顯示”>“符號，這個可以為模板添加載入事件，在載入時判斷改行的數(shù)據(jù)switch是否為true，不為true時將其隱藏，否則將”提示文字“和”>”符號隱藏：
最后為模板添加一個單擊事件，當pageUrl不為空時，執(zhí)行打開鏈接的操作。
最后，最后一項一般是沒有分隔線的，這個可以用到中繼器中的一個變量isLast，就是當前項是不是中繼器中的最后一項，是的話，這個值是true。因此我們可以單獨為下劃線加入一個載入時的事件（放在模板組合上也可以），這樣最后一項的分隔線就不顯示了。
帶圖標的
下面在以上的基礎上再實現(xiàn)一個帶圖標的，有了以上基礎，其實就比較簡單了，就是在模板里面添加一個圖片元件。
在數(shù)據(jù)表中增加一列pic，右鍵從本地引入圖標（推薦從阿里巴巴矢量圖標庫下載png圖片）
然后在“每項加載時”增加一個設置圖片的元件動作即可。由于有些png圖片的空白邊距過大，可能導致顯示的圖標大小不一，所以可以先把圖標自己編輯一下。
最后，中繼器自身還有一些變量如
index: 當前行的序號；
isFirst: 是不是第一行；
isEven： 是否是偶數(shù)行；
isOdd: 是否是奇數(shù)行；
isMarked: 是否是標記行
等等，可以用于很多判斷和篩選。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。