編輯導(dǎo)語(yǔ)：產(chǎn)品中我們經(jīng)常會(huì)遇到上下滑動(dòng)的頁(yè)面，比如我們?cè)谶M(jìn)行預(yù)覽頁(yè)面時(shí)，需要上下滑動(dòng)進(jìn)行查看；本文作者分享了關(guān)于實(shí)現(xiàn)移動(dòng)端頁(yè)面上下滑動(dòng)效果的Axure教程，我們一起來(lái)了解一下。

案例展示：https://ctm29p.axshare.com/#id=1btojr

工具：Axure RP9

本文章會(huì)介紹2種實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果的方法（學(xué)會(huì)這兩種方法就夠用了）。

01 方法一：（超級(jí)便捷）

這個(gè)方法重點(diǎn)是利用了“動(dòng)態(tài)面板”的“滾動(dòng)條”垂直滾動(dòng)的功能是實(shí)現(xiàn)內(nèi)容上下滑動(dòng)的效果。

設(shè)計(jì)思路如下：

1. 先畫(huà)出頁(yè)面基本結(jié)構(gòu)

如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個(gè)矩形（375*50），中間1個(gè)動(dòng)態(tài)面板（375*567）。

2. 對(duì)動(dòng)態(tài)面板進(jìn)行設(shè)置（重點(diǎn)來(lái)了）

1）填充滾動(dòng)預(yù)覽的內(nèi)容：雙擊【動(dòng)態(tài)面板】，進(jìn)入state1，然后再里面那個(gè)框框里填東西，使勁填，至少要填超過(guò)動(dòng)態(tài)面板的高度。

2）實(shí)現(xiàn)內(nèi)容滾動(dòng)：關(guān)閉state1，然后選中【動(dòng)態(tài)面板】右擊選中【滾動(dòng)條】選擇【垂直滾動(dòng)】。

或者如下圖操作：

點(diǎn)擊“預(yù)覽”，上下滑動(dòng)的效果就實(shí)現(xiàn)了，so easy！但是你會(huì)發(fā)現(xiàn)中有一條滾動(dòng)條在右邊好抓狂，影響美觀(guān)。

3）隱藏滾動(dòng)條：下面介紹兩種方法

1. 我們可以用一個(gè)矩形這個(gè)滾動(dòng)條給遮擋起來(lái)（魔高一尺道高一丈，(￣▽?zhuān)?／嘚瑟）如下圖：

2. (這個(gè)會(huì)比1好點(diǎn)不會(huì)遮擋到邊界的內(nèi)容)拉寬動(dòng)態(tài)面板，讓滾動(dòng)條區(qū)域到頁(yè)面尺寸外（即：是要先設(shè)置頁(yè)面尺寸，例如我的案例都是基于iPhone8的頁(yè)面尺寸）
（這個(gè)方法來(lái)自評(píng)論區(qū)一個(gè)小可愛(ài)，感謝小可愛(ài)??）

點(diǎn)擊預(yù)覽，完美。

02 方法二：（沒(méi)有滾動(dòng)條的煩惱）

這個(gè)方法比方法一稍微難理解一丟丟，可以跟著下面的操作步驟一邊操作一邊理解額。

這個(gè)方法是在于對(duì)動(dòng)態(tài)面板2的內(nèi)容會(huì)跟隨操作動(dòng)態(tài)面板1的滾動(dòng)而移動(dòng)，并對(duì)滑動(dòng)界限設(shè)置。

設(shè)計(jì)思路如下：

gif動(dòng)態(tài)來(lái)源于：http://www.codemsi.com/rp/420885.html

1. 先畫(huà)出頁(yè)面基本結(jié)構(gòu)

一如既往先畫(huà)個(gè)模型，如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個(gè)矩形（375*50），中間1個(gè)動(dòng)態(tài)面板1（375*567），再在動(dòng)態(tài)面板1的state1中添加一個(gè)動(dòng)態(tài)面板2（375*567）。

2. 漸進(jìn)明細(xì)

1）在動(dòng)態(tài)面板2的state1中填充內(nèi)容；使勁填充內(nèi)容，至少要填超過(guò)動(dòng)態(tài)面板1的高度，完成后才能看到滑動(dòng)效果。

2）拖動(dòng) 動(dòng)態(tài)面板1 時(shí)，動(dòng)態(tài)面板2跟隨垂直拖動(dòng)而移動(dòng)；選中【動(dòng)態(tài)面板1】點(diǎn)擊【新建交互】選中【拖動(dòng)時(shí)】-【移動(dòng)】目標(biāo)選擇“動(dòng)態(tài)面板2”，移動(dòng)選擇“跟隨垂直拖動(dòng)”點(diǎn)擊“完成”，如圖下設(shè)置：

3）拖動(dòng)結(jié)束 動(dòng)態(tài)面板1時(shí)，如果動(dòng)態(tài)面板2未接觸到頂部矩形時(shí)，移動(dòng)動(dòng)態(tài)面板2開(kāi)頭回到頂部。

• 選中【動(dòng)態(tài)面板1】點(diǎn)擊【新建交互】選擇【拖動(dòng)結(jié)束時(shí)】點(diǎn)擊【啟用情形】；
• 添加情形1：如果范圍于 動(dòng)態(tài)面板2 未接觸 范圍于 頂部矩形；
• 在情形1下添加動(dòng)作：【添加動(dòng)作】-【移動(dòng)】動(dòng)態(tài)面板2 到達(dá) (0,0) 點(diǎn)擊“完成”；如下圖設(shè)置：

4）拖動(dòng)結(jié)束 動(dòng)態(tài)面板1時(shí)，如果動(dòng)態(tài)面板2未接觸到底部矩形時(shí)，移動(dòng)動(dòng)態(tài)面板2結(jié)尾回到底部；操作步驟和（3）基本一致。

• 在【拖動(dòng)結(jié)束時(shí)】添加情形2：如果范圍于 動(dòng)態(tài)面板2 未接觸 范圍于 底部矩形；
• 在情形2下添加動(dòng)作：【添加動(dòng)作】-【移動(dòng)】動(dòng)態(tài)面板2 到達(dá) (0,-222) 點(diǎn)擊“完成”；如下圖設(shè)置：（tip：動(dòng)態(tài)面板1的高 – 動(dòng)態(tài)面板2的高 = -222）。

點(diǎn)擊預(yù)覽，完美。

終于寫(xiě)完了o(╥﹏╥)o，希望也能幫到有緣的你們額。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。