如何利用Axure快速實現長頁手動拖拽特效呢？本文在這里為大家奉上了詳細教程，enjoy~

很久之前在一篇文章中通過文字回復過，利用Axure快速實現長頁手動拖拽特效的方式。后續陸續有私信問具體怎么做，光靠文字有人成功有人失敗。

說實話自己也好久沒有動手制作原型，這里將特效以詳細教程方式發出來，順便重溫下。

Axure版本8.0.0.3293。

成品展示

元件準備

1. 首先在網上隨便找個手機框圖或者下個組件庫，再不濟就畫個框。
2. 準備你的長頁內容，一張長海報、一個設計好的長頁面、一個簡單的矩形。

話不多開動

1. 上框，沒錯我是最不濟的框；

2. 上長頁；

emmmmmm，太水了我們換一個做的頁面吧~

好像也差不多，就這么著吧！

3. 設置固定區域：創建動態面板，長頁在這個區域內滑動。（長度要固定并記住，她=435）

4. 放入長頁

長頁可以在動態面板內直接寫，也可以引入其他做好的頁面。

我直接把他放到動態面板的State1中。(記住長頁的長，他=1116)

PS：你的長頁如果不是圖片而是頁面，一定要將其轉為動態面板，并且自動調整尺寸。這個位置可能會是你最終失敗的原因，留個坑，如果失敗了多看兩遍這句話。

5. 召喚你的小學數學老師

還記得她和他嗎？

她=435；他=1116；

他往上最高可以到=1116-435=681；

他往下最低可以到=1116（沒錯就是他自己）。

6. 給他上限制

a. 點到你的長頁上

b. 雙擊交互中的“拖動時”

第一步：添加動作“移動”；

第二步：選擇原件“你的長頁”；

第三步：移動選擇“存執拖動”；

第四步：點擊“添加邊界”；

第五步：設置頂部邊界：>= -681? (負數哈)；

第六步：設置底部邊界：<= 1116；

完成，試試效果。

進階案例

做出滑到底部提示沒有內容后，頁面自動彈回的效果。下次有空再聊~

本文由@周關利 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議