在原型展示時，有些頁面過長，需要可以上下滑動，如何讓頁面能夠拖動鼠標實現(xiàn)上下滑動？

效果圖如下：

可直接點擊鏈接查看頁面滑動效果：https://btuqkp.axshare.com

準備

操作環(huán)境：Windows系統(tǒng)（小編目前Windows系統(tǒng)，不過蘋果的axure操作應該差別不大）

軟件：Axure RP8

演示原件：

1. 拖入一個動態(tài)面板，w=375，h=667（一般手機屏幕的像素大?。恢秒S意哦
2. 拖入兩條水平線，w=375，h=1
3. 在動態(tài)面板的state1內(nèi)拖入一個矩形（我用圖片代替），w=375，h=1135，位置：x=0，y=0

設置原件樣式及名稱

（1）將一條線放到動態(tài)面板頂部，（可以將線的顏色變?yōu)橥该鳎┟麨轫敳烤€

（2）同理將另一條線放在動態(tài)面板底部，（可以將線的顏色變?yōu)橥该鳎┟麨榈撞烤€。

（3）動態(tài)面板的state1內(nèi)拖入的矩形（我用圖片代替）命名為“滑動圖片”，動態(tài)面板命名為“滑動面板”。

設置交互樣式

（1）單擊“滑動面板”，設置“右側(cè)工具欄屬性——拖動時”交互。

雙擊“拖動時”進入“拖動時”交互設置面板，用例名稱case1設置如下：

添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“垂直移動”。

點擊確定，設置完成后交互顯示如下：

（2）設置“右側(cè)工具欄屬性–拖動結(jié)束時”交互。

第一步：雙擊“拖動結(jié)束時”進入“拖動結(jié)束時”交互設置面板，用例名稱case1設置如下：

點擊“添加條件”，彈出條件彈框設置彈框，選擇如下圖條件，點擊確定。

第二步：添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“絕對位置，x=0，y=0”，動畫選擇“線性”時間“200毫秒”。

點擊確定，設置完成后交互顯示如下：

此時已經(jīng)設置好case1，此處是滑動頁面與頂部的交互，讓滑動頁面在離開頂部范圍后能自動滑回頂部。

第三步，雙擊“拖動結(jié)束時”進入“拖動結(jié)束時”交互設置面板，用例名稱case2設置如下：點擊“添加條件”，彈出條件彈框設置彈框，選擇如下圖條件，點擊確定。

第四步：添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“絕對位置，x=0，y=-468”，動畫選擇“線性”時間“200毫秒”。

點擊確定，設置完成后交互顯示如下：

此時已經(jīng)設置好case2，此處是滑動頁面與底部的交互，讓滑動頁面在離開底部范圍后能自動滑回底部。

以上就設置完成啦，最終的“滑動面板”設置交互樣式如下：

小白問答：

問題：如果里面的滑動圖片有自己獨立交互怎么辦？

答案：可以將其組合或者設置成動態(tài)面板，此時設置的交互就要設置移動此組合或者動態(tài)面板了哦。

問題：底部移動的絕對位置怎么算？

答案：用圖片長度減去外部滑動面板的長度就是大概的正數(shù)值了，然后根據(jù)需要再調(diào)一調(diào)，記得一定在數(shù)值前加個負號哦。我的圖片長度1135-667=468。所以Y值設置的-468。

問題：為什么要設置動畫線性移動200毫秒？

答案：為了讓頁面在滑動后返回的效果更加柔和，移動時間可以根據(jù)需要調(diào)節(jié)哦。

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

題圖來自Unsplash，基于CC0協(xié)議