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

一、元件準備

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

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

二、排版

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

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

三、添加用例

1 drag移動時，移動course動態面板，默認跟隨。

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將排版好的原型再次轉換成動態面板，嵌到高保真手機殼上，并且將新的動態面板的底邊向上拉動，直到與bottom的底邊重合。

四、效果

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

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

本文由 @樂悠悠 原創發布于人人都是產品經理。未經許可，禁止轉載。