起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure RP 9 教程：頁面三級拖動
本期效果是一個三級拖動，第一次點擊彈出部分列表，向上拖動時顯示完整的列表，向下拖動時顯示最低級的列表。一起看看怎么操作~
本期效果：
本期效果是一個三級拖動，第一次點擊彈出部分列表，向上拖動時顯示完整的列表，向下拖動時顯示最低級的列表，效果非常簡單，大家先看看效果圖：
實現(xiàn)邏輯
我們使用一個動態(tài)面板，為其添加三種狀態(tài)下的頁面，在不同的狀態(tài)，頁面拖動結(jié)束時，動態(tài)面板切換到目標(biāo)頁面，并且移動到合理的位置，就輕松的實現(xiàn)了一個頁面拖級拖動的效果。
實現(xiàn)步驟
第一步，我們添加一個手機(jī)的框架。第二步，我們添加一個動態(tài)面板，里面添加三個狀態(tài)，分別為一級，二級，三級，為三級創(chuàng)建內(nèi)容，并創(chuàng)建為動態(tài)面板，內(nèi)容如圖所示：
第三步：標(biāo)記出上邊三個動態(tài)面板的狀態(tài)單獨放置在頁面上時Y軸的位置，如圖所示：
第四步：選中動態(tài)面板第一個狀態(tài)，也就是上圖中最小的一個狀態(tài)設(shè)置交互：
解釋：鼠標(biāo)單擊時，讓動態(tài)面板切換到二級狀態(tài)，且讓動態(tài)面板在150ms內(nèi)移動到（0，264）的位置。第五步：選中動態(tài)面板第二個狀態(tài)，也就是二級狀態(tài)設(shè)置交互：
解釋：向上拖動結(jié)束時，讓動態(tài)面板狀態(tài)切換為三級，讓動態(tài)面板在150ms內(nèi)移動到（0，0）位置；向下拖動時，讓動態(tài)面板切換到一級狀態(tài)，然后讓動態(tài)面板在150ms內(nèi)移動到（0，662）位置。第六步：選中動態(tài)面板的第三個狀態(tài)，設(shè)置交互：
解釋：向下拖動結(jié)束時，動態(tài)面板切換到狀態(tài)二，動態(tài)面板在150ms內(nèi)移動到（0，264）位置。此時就實現(xiàn)了簡單的三級拖動的效果了。
結(jié)語
原型文件下載鏈接：https://pan.baidu.com/s/1OcpCP91tRP1Jqw3MJsUrcA
提取密碼:m1ej
作者：王得宇A(yù)IPM
微信公眾號：他們已經(jīng)在路上了
- 目前還沒評論，等你發(fā)揮！
