今天達內昆明UI培訓和你們分享的是如何經過多動態面板套用來實現上下滑動不會超出屏幕框架。html
1、元件準備框架
top（頭部）、beijing（背景）、bottom（底部）、cours（課程）、drag（拖動）。ui
注：top和bottom保持在頂層，beijing爲矩形，此處應去掉邊框，cours和drag是動態面板，全部元件的寬度相同htm
2、排版get
beijing緊挨top底邊且對齊放置，bottom緊挨beijing底部放置，接着course以頭部對齊的方式覆蓋到beijing上，最後drag以頭部對齊的方式覆蓋到course上。原型
注：若是bottom以前忘記點擊頂層，是會被覆蓋住，這個時候要將其放置頂層。class
3、添加用例top
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://km.ui.tedu.cn/news/178492.html