整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：產品中我們經常會遇到上下滑動的頁面，比如我們在進行預覽頁面時，需要上下滑動進行查看；本文作者分享了關于實現移動端頁面上下滑動效果的Axure教程，我們一起來了解一下。
案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章會介紹2種實現頁面上下滑動效果的方法（學會這兩種方法就夠用了）。
這個方法重點是利用了“動態面板”的“滾動條”垂直滾動的功能是實現內容上下滑動的效果。
設計思路如下：
如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板（375*567）。
1）填充滾動預覽的內容：雙擊【動態面板】，進入state1，然后再里面那個框框里填東西，使勁填，至少要填超過動態面板的高度。
2）實現內容滾動：關閉state1，然后選中【動態面板】右擊選中【滾動條】選擇【垂直滾動】。
或者如下圖操作：
點擊“預覽”，上下滑動的效果就實現了，so easy！但是你會發現中有一條滾動條在右邊好抓狂，影響美觀。
3）隱藏滾動條：我們可以用一個矩形這個滾動條給遮擋起來（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下圖：
點擊預覽，完美。
這個方法比方法一稍微難理解一丟丟，可以跟著下面的操作步驟一邊操作一邊理解額。
這個方法是在于對動態面板2的內容會跟隨操作動態面板1的滾動而移動，并對滑動界限設置。
設計思路如下：
gif動態來源于：http://www.woshipm.com/rp/420885.html
一如既往先畫個模型，如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板1（375*567），再在動態面板1的state1中添加一個動態面板2（375*567）。
1）在動態面板2的state1中填充內容；使勁填充內容，至少要填超過動態面板1的高度，完成后才能看到滑動效果。
2）拖動 動態面板1 時，動態面板2跟隨垂直拖動而移動；選中【動態面板1】點擊【新建交互】選中【拖動時】-【移動】目標選擇“動態面板2”，移動選擇“跟隨垂直拖動”點擊“完成”，如圖下設置：
3）拖動結束 動態面板1時，如果動態面板2未接觸到頂部矩形時，移動動態面板2開頭回到頂部。
4）拖動結束 動態面板1時，如果動態面板2未接觸到底部矩形時，移動動態面板2結尾回到底部；操作步驟和（3）基本一致。
點擊預覽，完美。
終于寫完了o(╥﹏╥)o，希望也能幫到有緣的你們額。
本文由 @人事匆匆 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
圖1
圖2
圖3
圖4
就愛UI - 分享UI設計的點點滴滴
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
