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

導讀：下拉列表是網頁中一種最節省頁面空間的選擇方式，我們可以使用下拉列表快速選擇選項；如果選項太多時，我們還會用到下拉樹，對選項進行分類，例如廣東-廣州-xxx營業廳，分類后可以讓客戶更容易找到對應的選項。所以本期教程主要介紹如何在Axure里做一個高保真的下拉樹模板。

一、制作完成后應具備以下效果

1. 彈窗效果：點擊下拉框后彈出樹彈窗，點擊其他內容時自動收起
2. 展開收起：點擊樹節點可以切換展開或者收起對應子節點
3. 選擇回顯：選擇內容后，將選擇內容回顯至下拉框
4. 滾動效果：內容較多時，自動顯示滾動條，可以滾動查看內容

二、制作材料準備

1、下拉框組合

下拉框組合由矩形和上下箭頭組成：

矩形——填充顏色為白色，邊線顏色為灰色，里面填寫默認顯示文字，例如請選擇xxx；

下箭頭——矩形邊線顏色一致；

上箭頭默認隱藏，如下圖所示擺放即可。

2、彈窗組合

彈窗組合由樹和矩形制作：

樹——本案例使用的是Axure自帶的樹元件，用自帶的樹元件優點是展開和收起不需要自己寫邏輯，能夠直接使用，不過缺點也很明顯，第一，樹節點要一個個增加，操作麻煩浪費時間；第二，不能做搜索效果或者多選效果，那如果想顯示該效果的話就要用中繼器來制作樹，今天我們就從簡單基礎的普通樹元件入手，后續如果大家對搜索和多選效果感興趣的話，我也會繼續更新教程。

在樹節點中我們可以修改他的交互樣式，鼠標懸停時設置填充顏色為淺藍色，元件選中時填充顏色為深藍色。

動態面板——動態面板的作用是可以增加滾動條，我們直接將樹轉為動態面板，取消動態面板自適應內容，調整到固定大小，然后設置顯示垂直滾動條。

矩形——就是下拉框的一個背景，填充顏色為白色，邊線為深藍色。其實樣式你們都可以根據實際需求設置。

最后，將上面組合在一起，彈出組合默認隱藏

三、交互設置

1、下拉框組合交互

鼠標單擊下拉框組合時，顯示彈窗組合，這里我們要選擇置于頂層和燈箱效果

置于頂層就是將顯示的彈窗組合放到最上一層，這樣就不會被其他元件遮擋

燈箱效果就是如果鼠標點擊除了彈窗組合外的內容時，自動收起彈窗組合。

2、彈出組合交互

彈出組合顯示時，我們要同時顯示上箭頭和隱藏下箭頭

彈出組合隱藏時，我們做相反的操作顯示下箭頭和隱藏上箭頭

有的同學可能會疑問，為什么顯示隱藏的交互不放在上面點擊下拉框的時候做呢？前半部分是ok的，可以點擊下拉框的時候顯示上箭頭，隱藏下箭頭，但是隱藏時呢？有些同學可能會說點擊了選項隱藏上箭頭顯示下箭頭就可以的，的確也是可以，但是也忽視了一點，就是點擊其他地方收起彈窗的情況，因為我們做了燈箱效果，所以點擊其他地方也可以收起彈窗，這樣就沒了觸發箭頭顯示隱藏的事件了，所以我們在彈窗組合隱藏時寫這個交互就可以一鳥百鳥了。

3、樹節點鼠標單擊時

樹節點單擊時，我們要做兩個交互

設置文本：設置下拉框默認的文字為當前單擊節點的文字，為了方便我們直接用this.text就可以了，這個操作就是回顯文字，可以知道是否已選擇和選擇了哪一個選項。

隱藏：隱藏彈窗組合，因為這個是單選的樹，所以選擇選項后，一般邏輯都是自動隱藏彈窗的。

然后我們需要把這個鼠標單擊時的交互，復制粘貼到每一個可以選擇的樹節點里。

這樣我們就完成了整個元件了，將它組合在一起，以后就可以直接復制或者從元件庫用拖出來使用

以上就是高保真原型——下拉樹的制作方法了，感興趣的同學們可以動手試試，謝謝您的閱讀。

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

題圖來自pexels，基于CC0協議