起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure8.0｜移動端上下滑動不出屏
制作高保真原型的時候，常常需要將屏幕上下滑動，今天和大家分享的是通過多動態面板套用實現上下滑動不會超出屏幕框架。
一、元件準備
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，目前在找工作
本文由 @樂悠悠 原創發布于人人都是產品經理。未經許可，禁止轉載。
評論
第三步，作者應該表述錯了，應該是‘’編輯條件 如果drag的頂部小于top的底部‘’
您好，有哪位大神知道，滾動界面上如何做點擊切換動態面板效果的功能嗎？？
完了，還是不是很懂TAT
你好 為什么我cours的內容到了頂部或者底部以后不會停止 還繼續滑動呢，是不是判斷出了點問題呢？
不是很明白 如果是做滑動的效果 做兩層動態面板 設置滾動就好啦 ??
可以加一下QQ么？
course的怎么樣才能只顯示drag的高度的內容呢
會了 ??
沒懂
這個用8.0的添加頂部邊界，底部邊界 ?? ， 幾秒就弄好了。。。。
可以加一下你QQ請教一下么
請問在哪里添加哦
親，能加你qq嗎？有點問題，幫忙看下 http://x10w6c.axshare.com
你好，我的問題 跟你一樣的 請問解決了嗎 能否留個聯系方式
為什么我這里沒有跟隨呢
8.0以后添加邊界比這個簡單多了吧 ??
是的，但是研究了一下，沒做出來 ?
每天學個小技巧，一個月后就變成Axure大牛了。
加油 : ??
7.0 可以加2個線轉化為動態面板。 用條件中的原件范圍接觸的方式進行判斷
8.0 在設置移動時，下面有個添加邊界，設置移動范圍
都要簡單多
我試一下看看 謝謝。
@周關利 能加一下你的qq嗎？
125078878
1、元素說明
外層 一個固定大小的動態面板，高度640；固定屏幕
里面 一個自動調整為內容尺寸的面板，高度1000，長頁面
2、期望動作
在外層固定面板中，可以手動滑動長頁面。 并且長頁面在一個固定的一個范圍內滑動。 （長頁面不出屏）
3、操作
在外層動態面板的狀態1中，創建長頁面的動態面板。
在狀態1中，對長頁面動態面板設置“拖動時”事件
添加動作“移動-長頁面面板”設置垂直移動
添加移動邊界
頂部 大于等于 負 (長頁面高度 – 外層固定頁面高度)
底部 小于等于 長頁面高度
頂部 大于等于 負360
底部 小于等于 1000
就可以了
好的，學會了，謝謝。
我tm花了一晚上學完你的教程，才看到下面這評論??！ ??
?? ?? ??
我的咋都不滾動?。?/p>
我的也不滾動，請問你解決了嗎
受教啦！
感謝感謝！
太感謝你啦，你的回答完美解決我的問題??！