如何利用動態面板來實現側滑菜單呢，一起來文中看看~

　　利用動態面板實現側滑菜單效果，實現過程如下：

　　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協議