本期效果是一個(gè)三級(jí)拖動(dòng)，第一次點(diǎn)擊彈出部分列表，向上拖動(dòng)時(shí)顯示完整的列表，向下拖動(dòng)時(shí)顯示最低級(jí)的列表。一起看看怎么操作~

本期效果：

本期效果是一個(gè)三級(jí)拖動(dòng)，第一次點(diǎn)擊彈出部分列表，向上拖動(dòng)時(shí)顯示完整的列表，向下拖動(dòng)時(shí)顯示最低級(jí)的列表，效果非常簡單，大家先看看效果圖：

實(shí)現(xiàn)邏輯

我們使用一個(gè)動(dòng)態(tài)面板，為其添加三種狀態(tài)下的頁面，在不同的狀態(tài)，頁面拖動(dòng)結(jié)束時(shí)，動(dòng)態(tài)面板切換到目標(biāo)頁面，并且移動(dòng)到合理的位置，就輕松的實(shí)現(xiàn)了一個(gè)頁面拖級(jí)拖動(dòng)的效果。

實(shí)現(xiàn)步驟

第一步，我們添加一個(gè)手機(jī)的框架。第二步，我們添加一個(gè)動(dòng)態(tài)面板，里面添加三個(gè)狀態(tài)，分別為一級(jí)，二級(jí)，三級(jí)，為三級(jí)創(chuàng)建內(nèi)容，并創(chuàng)建為動(dòng)態(tài)面板，內(nèi)容如圖所示：

第三步：標(biāo)記出上邊三個(gè)動(dòng)態(tài)面板的狀態(tài)單獨(dú)放置在頁面上時(shí)Y軸的位置，如圖所示：

第四步：選中動(dòng)態(tài)面板第一個(gè)狀態(tài)，也就是上圖中最小的一個(gè)狀態(tài)設(shè)置交互：

解釋：鼠標(biāo)單擊時(shí)，讓動(dòng)態(tài)面板切換到二級(jí)狀態(tài)，且讓動(dòng)態(tài)面板在150ms內(nèi)移動(dòng)到（0，264）的位置。第五步：選中動(dòng)態(tài)面板第二個(gè)狀態(tài)，也就是二級(jí)狀態(tài)設(shè)置交互：

解釋：向上拖動(dòng)結(jié)束時(shí)，讓動(dòng)態(tài)面板狀態(tài)切換為三級(jí)，讓動(dòng)態(tài)面板在150ms內(nèi)移動(dòng)到（0，0）位置；向下拖動(dòng)時(shí)，讓動(dòng)態(tài)面板切換到一級(jí)狀態(tài)，然后讓動(dòng)態(tài)面板在150ms內(nèi)移動(dòng)到（0，662）位置。第六步：選中動(dòng)態(tài)面板的第三個(gè)狀態(tài)，設(shè)置交互：

解釋：向下拖動(dòng)結(jié)束時(shí)，動(dòng)態(tài)面板切換到狀態(tài)二，動(dòng)態(tài)面板在150ms內(nèi)移動(dòng)到（0，264）位置。此時(shí)就實(shí)現(xiàn)了簡單的三級(jí)拖動(dòng)的效果了。

結(jié)語

原型文件下載鏈接：https://pan.baidu.com/s/1OcpCP91tRP1Jqw3MJsUrcA

提取密碼:m1ej

作者：王得宇A(yù)IPM

微信公眾號(hào)：他們已經(jīng)在路上了