如何利用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)側(cè)滑菜單呢，一起來(lái)文中看看~

利用動(dòng)態(tài)面板實(shí)現(xiàn)側(cè)滑菜單效果，實(shí)現(xiàn)過(guò)程如下：

1、準(zhǔn)備首頁(yè)，標(biāo)題欄添加一個(gè)菜單按鈕，用于控制抽屜菜單打開(kāi)。

2、添加一個(gè)動(dòng)態(tài)面板組件，將動(dòng)態(tài)面板拖放到最終顯示的位置，設(shè)置動(dòng)態(tài)面板的寬、高，動(dòng)態(tài)面板的寬度比實(shí)際屏幕的寬度小，預(yù)留右側(cè)的空白；動(dòng)態(tài)面板的高度，根據(jù)需要設(shè)置是否包含標(biāo)題欄。

如下圖所示：

3、動(dòng)態(tài)面板位置、大小設(shè)置完成，接下來(lái)，設(shè)置動(dòng)態(tài)面板的2個(gè)狀態(tài)。雙擊動(dòng)態(tài)面板，彈出“面板管理狀態(tài)”彈框，默認(rèn)狀態(tài)是state1，重命名為“側(cè)滑前”，增加一個(gè)狀態(tài)，重命名為“側(cè)滑后”。

4、編輯狀態(tài)。“側(cè)滑前”的狀態(tài)頁(yè)面，不添加任何內(nèi)容。雙擊“側(cè)滑后”，編輯抽屜菜單頁(yè)，添加組件，如下圖：

2個(gè)狀態(tài)的順序需要注意：側(cè)滑前的狀態(tài)要在前。

（為了使動(dòng)態(tài)面板不影響其他組件的編輯，在狀態(tài)編輯結(jié)束后，將動(dòng)態(tài)面板的順序設(shè)置為“置于底層”）

5、給菜單按鈕綁定單擊事件。在開(kāi)始綁定點(diǎn)擊事件前，還有一件事情需要做，設(shè)置一個(gè)全局變量isSlide，用來(lái)判斷菜單是否已經(jīng)側(cè)滑，默認(rèn)值設(shè)為false。(全局變量在工具欄“項(xiàng)目”中打開(kāi)，具體不細(xì)說(shuō))

選中菜單按鈕，切換到屬性頁(yè)面，雙擊“鼠標(biāo)單擊時(shí)”，添加點(diǎn)擊用例。當(dāng)變量值isSlide=false時(shí)，菜單按鈕的點(diǎn)擊事件為打開(kāi)側(cè)滑菜單；當(dāng)isSilde=true時(shí)，菜單按鈕的點(diǎn)擊事件為關(guān)閉側(cè)滑菜單。

如下圖所示，為點(diǎn)擊事件的具體用例：

打開(kāi)菜單：

1）添加用例時(shí)，添加一個(gè)判斷條件，isSlide=false。

2）將動(dòng)態(tài)面板的順序，設(shè)置為頂層。（原先我們?yōu)榱朔奖闫渌M件編輯，將動(dòng)態(tài)面板設(shè)置到底層，所以在這里，要將其設(shè)置回頂層，如果沒(méi)有設(shè)置到底層，這一步可以省略）

3）設(shè)置動(dòng)態(tài)面板的狀態(tài)。設(shè)置為側(cè)滑后狀態(tài)，設(shè)置狀態(tài)面板切換狀態(tài)時(shí)的動(dòng)畫(huà)以及動(dòng)畫(huà)展示的時(shí)間。

4）將全局變量isSlide修改為true。

關(guān)閉菜單：

1）添加用例時(shí)，添加一個(gè)判斷條件，isSlide=true。

2）設(shè)置面板狀態(tài)，設(shè)置為側(cè)滑前狀態(tài)，設(shè)置動(dòng)畫(huà)以及動(dòng)畫(huà)展示事件。

3）重新將動(dòng)態(tài)面板的順序設(shè)置為底層。（同樣，如果沒(méi)有設(shè)置底層的需求，這步可省略）

4）將全局變量isSlide修改為false。

總結(jié)：

• 添加動(dòng)態(tài)面板，設(shè)置動(dòng)態(tài)面板最終顯示位置和大小。
• 設(shè)置動(dòng)態(tài)面板的2個(gè)狀態(tài)，側(cè)滑前和側(cè)滑后。2個(gè) 狀態(tài)的順序?yàn)椋骸眰?cè)滑前“在前。
• 增加全局變量isSlide，判斷菜單打開(kāi)的狀態(tài)。
• 設(shè)置觸發(fā)按鈕的點(diǎn)擊事件，根據(jù)isSlide的值，設(shè)置用例：打開(kāi)菜單、關(guān)閉菜單。用例內(nèi)容包括：切換狀態(tài)面板的順序?qū)蛹?jí)（非必須）；設(shè)置面板狀態(tài)（側(cè)滑前，側(cè)滑后），含動(dòng)畫(huà)和動(dòng)畫(huà)時(shí)間? 修改全局變量isSlide的值（true，false）。

以上，結(jié)束~

本文由 @First_Step 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議