版本：Axure RP 8.0.0.3303
內容介紹：下拉框的數據一般都是枚舉型的，當大量使用下拉框進行設計時，填枚舉值比較麻煩，這個時候可以用中繼器自制一個下拉框保存到一個特殊的頁面，哪個設計界面需要用，就直接複製或複製後修改少量參數即可使用；
一、視頻效果
二、設計
- 在空白的畫面上增加一個動態面板，定義寬度200，高度30，取名叫dtmb_1。
圖一：添加動態面板：dtmb_1
- 雙擊動態面板dtmb_1，把面板狀態state1改成txt_content（要在這個面板下畫文本框）。
圖二：dtmb_1的面板狀態設置
- 進入txt_content，增加一個文本框，定義寬度200，高度30，取名叫condition_name，因為文本框數據來源是通過下拉獲取，所有屬性改為只讀。
圖三：在txt_content中增加文本框
- 添加icon圖標，這個圖標是用來做點擊事件，觸發下拉框數據提供選擇，數據我們稍後用中繼器來做，所有這裡取名icon_show_repeater（圖標自帶的元件庫有）。
圖四：在文本框上增加icon圖標
- 在文本框下面增加一個新的動態面板，寬度160，高度170，取名dtmb_2。
圖五：增加動態面板dtmb_2
- 給動態面板dtmb_2的面板狀態取名repeater_data（方法同第2步，用來放置中繼器，提供數據源）並且設置為隱藏（初始化時，不直接展示下拉框數據），進入repeater_data，首先添加中繼器並取名叫zjq，可以適當設置下中繼器數據列的寬度，接著綁定中繼器顯示數據列，編輯中繼器數據。
圖六：設置中繼器（zjq）
- （以上操作，控件佈局完成）為icon_show_repeater加交互，效果是點擊icon_show_repeater，展示中繼器中的數據，這需要2項交互，分別是過濾中繼器中的數據（只展示中繼器中符合條件的數據）和顯示動態面板dtmb_2，這裡注意過濾交互要在前面。
圖七：過濾中繼器數據
圖八：展示出動態面板dtmb_2
- 為動態面板dtmb_2增加交互，效果是當dtmb_2展示出來時，icon_show_repeater圖標轉動180度，當dtmb_2隱藏時，icon_show_repeater圖標迴轉180度，圖片展示了顯示時交互，在隱藏時選擇逆時針即可，其它不變。
圖九：設置icon_show_repeater的旋轉
- 雙擊中繼器（zjq）,進入中繼器控件編輯，因為我們只有一列，給列取名repeater_value。
- 給列repeater_value添加交互，效果是把選中的值賦給文本框（condition_name），同時選擇完值後，要隱藏掉下拉值，即隱藏動態面板dtmb_2。
圖十一：repeater_value交互
圖十二：賦值公式
- 重新回到dtmb_1界面，把該動態面板的“自動調整為內容尺寸勾上。
圖十三：設置dtmb_1
三、其它說明
- 第7步（圖一）的交互要先過濾，再顯示。
- 第7步（圖二）的顯示要選擇“燈箱效果”，背景色按照自己的要求可調整，包括透明度。如果選擇其它的，操作效果沒那麼好。
- 給文本框取名為condition_name，這個正好是中繼器第二列“condition”中的值，做中繼器數據篩選時，取文本框名字作為條件，這樣在複製一個新的下拉框時，只需要修改文本框的名字換掉，即可做到中繼器數據篩選的目的，成為一個新內容的下拉框。
分享到:
閱讀更多 blitheDotChen 的文章
