制作高保真原型的時候，常常需要將屏幕上下滑動，今天和大家分享的是通過多動態(tài)面板套用實現(xiàn)上下滑動不會超出屏幕框架。

一、元件準備

top（頭部）、beijing（背景）、bottom（底部）、cours（課程）、drag（拖動）。

注：top和bottom保持在頂層，beijing為矩形，此處應(yīng)去掉邊框，cours和drag是動態(tài)面板，所有元件的寬度相同

二、排版

beijing緊挨top底邊且對齊放置，bottom緊挨beijing底部放置，接著course以頭部對齊的方式覆蓋到beijing上，最后drag以頭部對齊的方式覆蓋到course上。

注：如果bottom之前忘記點擊頂層，是會被覆蓋住，這個時候要將其放置頂層。

三、添加用例

1 drag移動時，移動course動態(tài)面板，默認跟隨。

2 drag拖動時，自身垂直拖動。

3 drag拖動時，編輯條件 如果drag的頂部大于top的底部，則drag移動到絕對位置(達到) ?x:0, ?y:[[t.bottom]]。

4?drag拖動時，編輯條件 如果drag的底部小于bottom的頂部，則drag移動到絕對位置(達到) ?x:0, ?y:[[b.top-d.height)]]。

5將排版好的原型再次轉(zhuǎn)換成動態(tài)面板，嵌到高保真手機殼上，并且將新的動態(tài)面板的底邊向上拉動，直到與bottom的底邊重合。

四、效果

具體效果請到如下網(wǎng)址查看：http://67r9k4.axshare.com/#g=1&p=index。

作者：樂悠悠 ? QQ：714226583，目前在找工作

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