中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

回答上一篇文章中網友的評論。真實案例，用中繼器搞定下拉框

上一篇文章已經介紹了基礎組件“文本框”“下拉框”的重寫實現，我們已經可以實現以下自定義效果：

文本框：

下拉框：

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

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

那么什么是中繼器？

如果說“動態面板”是PPT，那么“中繼器”更像是EXCEL。中繼器，英文名“Repeater”，我覺得重復器的定義更方便我們對它的理解，如果稍微學過編程的童鞋，把中繼器的編輯原理當成是面向對象中對“類”的編輯，中繼器的展示當成對“實例”的展示會相當好理解。那么沒學過編程的童鞋呢？其實，我們可以把中繼器看成一個“模版”，我們在這個模版中的任何編輯，都會影響到用了這個模版的所有組件。

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

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

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

接下來，開始我們的重頭戲，中繼器創建：

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

那么，決定中繼器內容的是中繼器里面的文字編輯嗎？當然是！

中繼器強大的地方，在于它能將類似于excel的行列數據，通過axure提供的交互事件與模版下的每個實例進行綁定。

那么這個類似于excel的數據編輯器長什么樣呢？

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

【方式一】點擊單擊中繼器，在右側“屬性”下方找到

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

那么，怎么把表里的數據跟我們的“模版”關聯呢，我們繼續“下拉框”的教程。

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

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

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

到這里，我們已經完成了對“子菜單”模版的基本編輯，只差最后一部就能實現下拉框了。

至此，我們已經完成了下拉框的中繼器式改寫，可以優雅的實現以下效果了：

如果想改變子菜單內容，只須改變表格內容即可：

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

當然，有的小伙伴會糾結于這種實現方式下，border堆疊的bug，如下圖：

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

二、日期控件基礎版

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

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

本期我們做的是日期控件的基礎版本

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

之所以說是基礎版本呢，是因為本期只實現到一個月（31天）的功能點選，這對于大部分產品展示來說其實已經很夠用了，當然后續我們也會介紹一年12個月的實現方式，請大家不要著急哈。

來，下面開始制作過程。

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

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

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

到這里，我們已經實現了日期控件的基本版制作了，請看效果圖：

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

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

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

本文由 @kache0123 原創發布于人人都是產品經理?，未經許可，禁止轉載。

題圖來自 Unsplash ，基于 CC0 協議