下拉列表框是很常用的元件杀饵，Axure元件庫也提供了下拉列表框莽囤，但是Axure提供的下拉框不夠美觀，這里我們發(fā)揚造輪子的精神切距，自己定義下拉框朽缎。
我們先看一下制作好的省份選擇的下拉框：
效果預覽：http://www.axurestudy.cn/pr/index.html
【需求分析】
1、下拉列表分成初始狀態(tài)、初始狀態(tài)下顯示請選擇字樣话肖，下拉箭頭朝下北秽；
2、當鼠標點擊的時候最筒，下拉框的的邊框變成藍色贺氓，下拉箭頭朝上，并且展示下拉列表數(shù)據(jù)項床蜘；
3掠归、當鼠標在下拉列表項上移動的時候，選項變成藍色悄泥；
4虏冻、單點擊其中一個數(shù)據(jù)項的時候，下拉框收起弹囚，在下拉框里面顯示選中項厨相；
【原型設計】
1、現(xiàn)在畫布拖入一個矩形框province鸥鹉，并且在矩形框里面輸入Font?AweSome圖標字符靠右對齊蛮穿，如果不會使用Font?AweSome的同學，請查看如何使用字體圖標毁渗；
2践磅、在矩形框里面拖入一個輸入框input，邊框設置為0灸异，錄入文字“?請選擇 ”府适；
3、拖入一個中繼器肺樟，在數(shù)據(jù)源里面錄入省份名稱數(shù)據(jù)檐春；
4、點擊右鍵么伯，把中繼器轉(zhuǎn)換為動態(tài)面板疟暖，設置動態(tài)面板高度為合適的高度，并且設置動態(tài)面板為垂直方面滾動田柔；
5俐巴、設置動態(tài)面板為隱藏狀態(tài)；
至此硬爆，自定義下拉列表的原型已經(jīng)制作完成欣舵，現(xiàn)在的效果如下所示：
【交互設計】
1、設置矩形框province的交互樣式摆屯，當矩形框為選中的時候邻遏，設置邊框顏色為藍色；
2虐骑、輸入框PInput和矩形框Province組合准验，設置該組合的點擊事件，當鼠標單擊的時候廷没，設置矩形框Province在選中和取消選中之間進行切換糊饱；
3、設置矩形框Province的選中事件颠黎，當Province被選中另锋，設置切換為，并且展示動態(tài)面板狭归；當Province取消選中的時候夭坪，為并且隱藏動態(tài)面板；
4过椎、設置中繼器的記錄的交互狀態(tài)室梅，當鼠標懸浮的時候，修改矩形框的填充顏色疚宇；
5亡鼠、當選中中繼器的一個記錄的時候，設置輸入框的值為選中值敷待，并且隱藏下拉列表间涵；
到了這里，自定義下拉列表框就制作好了榜揖，同學們趕緊去試試吧勾哩。
回復【入門】 ，獲取零基礎Axure快速入門視頻教程举哟；
回復【安裝】 钳幅，獲取安裝程序；
回復【練習】 ，獲取練習案例杭隙；
回復【高保真】飒炎，獲取高保真原型；
關注微信公眾號【猿型庫】钠导，獲取更多優(yōu)質(zhì)Axure資源；
