Axure教程：動態面板實現側滑選單
如何利用動態面板來實現側滑選單呢，一起來文中看看~
利用動態面板實現側滑選單效果，實現過程如下：
1、準備首頁，標題欄新增一個選單按鈕，用於控制抽屜選單開啟。
2、新增一個動態面板元件，將動態面板拖放到最終顯示的位置，設定動態面板的寬、高，動態面板的寬度比實際螢幕的寬度小，預留右側的空白；動態面板的高度，根據需要設定是否包含標題欄。
如下圖所示：
3、動態面板位置、大小設定完成，接下來，設定動態面板的2個狀態。雙擊動態面板，彈出“面板管理狀態”彈框，預設狀態是state1，重新命名為“側滑前”，增加一個狀態，重新命名為“側滑後”。
4、編輯狀態。“側滑前”的狀態頁面，不新增任何內容。雙擊“側滑後”，編輯抽屜選單頁，新增元件，如下圖：
2個狀態的順序需要注意：側滑前的狀態要在前。
（為了使動態面板不影響其他元件的編輯，在狀態編輯結束後，將動態面板的順序設定為“置於底層”）
5、給選單按鈕繫結單擊事件。在開始繫結點選事件前，還有一件事情需要做，設定一個全域性變數isSlide，用來判斷選單是否已經側滑，預設值設為false。(全域性變數在工具欄“專案”中開啟，具體不細說)
選中選單按鈕，切換到屬性頁面，雙擊“滑鼠單擊時”，新增點選用例。當變數值isSlide=false時，選單按鈕的點選事件為開啟側滑選單；當isSilde=true時，選單按鈕的點選事件為關閉側滑選單。
如下圖所示，為點選事件的具體用例：
開啟選單：
1）新增用例時，新增一個判斷條件，isSlide=false。
2）將動態面板的順序，設定為頂層。（原先我們為了方便其他元件編輯，將動態面板設定到底層，所以在這裡，要將其設定回頂層，如果沒有設定到底層，這一步可以省略）
3）設定動態面板的狀態。設定為側滑後狀態，設定狀態面板切換狀態時的動畫以及動畫展示的時間。
4）將全域性變數isSlide修改為true。
關閉選單：
1）新增用例時，新增一個判斷條件，isSlide=true。
2）設定面板狀態，設定為側滑前狀態，設定動畫以及動畫展示事件。
3）重新將動態面板的順序設定為底層。（同樣，如果沒有設定底層的需求，這步可省略）
4）將全域性變數isSlide修改為false。
總結：
- 新增動態面板，設定動態面板最終顯示位置和大小。
- 設定動態面板的2個狀態，側滑前和側滑後。2個 狀態的順序為：”側滑前“在前。
- 增加全域性變數isSlide，判斷選單開啟的狀態。
- 設定觸發按鈕的點選事件，根據isSlide的值，設定用例：開啟選單、關閉選單。用例內容包括：切換狀態面板的順序層級（非必須）；設定面板狀態（側滑前，側滑後），含動畫和動畫時間 修改全域性變數isSlide的值（true，false）。
以上，結束~
本文由 @First_Step 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議