回答上一篇文章中網(wǎng)友的評論。真實(shí)案例，用中繼器搞定下拉框

上一篇文章已經(jīng)介紹了基礎(chǔ)組件“文本框”“下拉框”的重寫實(shí)現(xiàn)，我們已經(jīng)可以實(shí)現(xiàn)以下自定義效果：

文本框：

下拉框：

那么問題來了，在一個系統(tǒng)中我們需要多次復(fù)用下拉框，每個下拉框的下拉預(yù)設(shè)值在不同頁面里面肯定是不一樣的，如果下拉數(shù)量及內(nèi)容有所改變，那么我們對每個下拉“子菜單”就要進(jìn)行繁瑣的編輯，雖然ctrl+c、ctrl+v能幫我們提升效率，但畢竟這樣的組件復(fù)用性顯然太低，再加上如果我們對下拉菜單的底色、邊框等做調(diào)整，意味著所有子項需要刪掉重置…

在認(rèn)識中繼器之前，這一切是多么讓人抓狂，而中繼器卻能輕松解決我們的煩惱，我們馬上來見識一下axure這件大殺器！

那么什么是中繼器？

如果說“動態(tài)面板”是PPT，那么“中繼器”更像是EXCEL。中繼器，英文名“Repeater”，我覺得重復(fù)器的定義更方便我們對它的理解，如果稍微學(xué)過編程的童鞋，把中繼器的編輯原理當(dāng)成是面向?qū)ο笾袑Α邦悺钡木庉?，中繼器的展示當(dāng)成對“實(shí)例”的展示會相當(dāng)好理解。那么沒學(xué)過編程的童鞋呢？其實(shí)，我們可以把中繼器看成一個“模版”，我們在這個模版中的任何編輯，都會影響到用了這個模版的所有組件。

下面，我們通過對上一篇文章中“下拉框”的改寫來理解中繼器。

一、下拉框重寫（中繼器方式）

這部分上一篇已經(jīng)講過了，完事之后我們能看到以下效果：

接下來，開始我們的重頭戲，中繼器創(chuàng)建：

看完這個對比，大家能否理解我前面說的“模版”比喻了呢？

那么，決定中繼器內(nèi)容的是中繼器里面的文字編輯嗎？當(dāng)然是！

中繼器強(qiáng)大的地方，在于它能將類似于excel的行列數(shù)據(jù)，通過axure提供的交互事件與模版下的每個實(shí)例進(jìn)行綁定。

那么這個類似于excel的數(shù)據(jù)編輯器長什么樣呢？

很多小伙伴（包括我）一開始不知道這個編輯器藏在哪，下面我提供兩種方式：

【方式一】點(diǎn)擊單擊中繼器，在右側(cè)“屬性”下方找到

【方式二】雙擊中繼器，進(jìn)入后單機(jī)頁面空白處，在“屬性”下方找到這個表里的數(shù)據(jù)可以任意更改，如EXCEL那般。我們注意到，默認(rèn)的中繼器只有3個實(shí)例，對應(yīng)表里只有3行，我們往表里增加1行，那么會對應(yīng)會增加1個實(shí)例，以此類推。

那么，怎么把表里的數(shù)據(jù)跟我們的“模版”關(guān)聯(lián)呢，我們繼續(xù)“下拉框”的教程。

在這一節(jié)中，我們對中繼器“每項加載”交互實(shí)例添加了文本的綁定，在這里，如果有童鞋疑問：

為什么不用“加載時”，而用“每項加載”？

這里先賣個關(guān)子，可以劇透一點(diǎn)的是，加載時也可以實(shí)現(xiàn)文本的綁定，但是需要在瀏覽器中才能瀏覽到實(shí)時數(shù)據(jù)，而“每項加載”在axure視圖就能看到，至于在其他中繼器元素的表現(xiàn)上，二者的渲染也不盡相同，這個我們以后在展開細(xì)說。

到這里，我們已經(jīng)完成了對“子菜單”模版的基本編輯，只差最后一部就能實(shí)現(xiàn)下拉框了。

至此，我們已經(jīng)完成了下拉框的中繼器式改寫，可以優(yōu)雅的實(shí)現(xiàn)以下效果了：

如果想改變子菜單內(nèi)容，只須改變表格內(nèi)容即可：

這樣的復(fù)用性，比起原生組件來說也不逞多讓了吧？

當(dāng)然，有的小伙伴會糾結(jié)于這種實(shí)現(xiàn)方式下，border堆疊的bug，如下圖：

這是由于中繼器垂直排列的方式引起的，雖然中繼器也有針對垂直排列的間隔調(diào)整，但效果不盡如人意，作為強(qiáng)迫癥，我還是找到了解決的方案，就是邊框調(diào)整，把原來的四邊框，調(diào)整為三邊框，雖然第一個子菜單沒有了上邊框，但由于受到父菜單的遮擋，整個子菜單展示也沒有什么瑕疵了^0^

二、日期控件基礎(chǔ)版

接下來我們趁熱打鐵，通過“日期控件”的實(shí)現(xiàn)來加加深對中繼器的理解

(PS.日期控件axure并未提供原生版本，所以也談不上重寫，請忽略0.0）

本期我們做的是日期控件的基礎(chǔ)版本

功能點(diǎn)：點(diǎn)擊父菜單（文本框）展示日期子菜單，點(diǎn)擊日期后將日期自動填充到父菜單，并關(guān)閉子菜單。

之所以說是基礎(chǔ)版本呢，是因為本期只實(shí)現(xiàn)到一個月（31天）的功能點(diǎn)選，這對于大部分產(chǎn)品展示來說其實(shí)已經(jīng)很夠用了，當(dāng)然后續(xù)我們也會介紹一年12個月的實(shí)現(xiàn)方式，請大家不要著急哈。

來，下面開始制作過程。

第一步完成后我們能看到如下效果：

完成了父菜單框架的搭建，接下來我們需要去創(chuàng)建日期控件子菜單。

接下來，我們只需要將數(shù)據(jù)和中繼器綁定起來，就能完成日期控件了。

到這里，我們已經(jīng)實(shí)現(xiàn)了日期控件的基本版制作了，請看效果圖：

至于一些制作過程中的細(xì)節(jié)（如hover日期改變底色等）就不鋪開闡述了，不懂的小伙伴可以百度一下~

至此，我們已經(jīng)完成了三個組件的重寫（新寫），當(dāng)然，同一個組件有多種實(shí)現(xiàn)方式，例如我們的下拉框就有“純動態(tài)面板”制作以及“動態(tài)面板+中繼器”制作，雖然方法有多種，但基于復(fù)用性和簡便性的綜合考量，由中繼器編寫的組件還是更討好用戶喜歡的，但是，中繼器在使用過程中還是有很多大坑小坑，以后會慢慢帶領(lǐng)大家一起揭曉~

在下一篇文章中，我們會對axure的常用組件“表格”進(jìn)行重寫，盡情期待~

本文由 @kache0123 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

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