Axure教程:動(dòng)態(tài)面板實(shí)現(xiàn)側(cè)滑菜單

1 評(píng)論 7409 瀏覽 21 收藏 6 分鐘

如何利用動(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 點(diǎn)擊按鈕后達(dá)到了預(yù)期效果,但是再次點(diǎn)擊按鈕,事件不生效,需要再次刷新頁(yè)面按鈕事件才能觸發(fā)。求指教

    來(lái)自廣東 回復(fù)