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

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

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

Axure版本8.0.0.3293。

成品展示

元件準備

首先在網(wǎng)上隨便找個手機框圖或者下個組件庫，再不濟就畫個框。

準備你的長頁內(nèi)容，一張長海報、一個設(shè)計好的長頁面、一個簡單的矩形。

話不多開動

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

2. 上長頁；

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

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

3. 設(shè)置固定區(qū)域：創(chuàng)建動態(tài)面板，長頁在這個區(qū)域內(nèi)滑動。(長度要固定并記住，她=435)

4. 放入長頁

長頁可以在動態(tài)面板內(nèi)直接寫，也可以引入其他做好的頁面。

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

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

5. 召喚你的小學數(shù)學老師

還記得她和他嗎？

她=435；他=1116；

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

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

6. 給他上限制

a. 點到你的長頁上

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

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

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

第三步：移動選擇“存執(zhí)拖動”；

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

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

第六步：設(shè)置底部邊界：<= 1116；

完成，試試效果。

進階案例

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

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

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

給作者打賞，鼓勵TA抓緊創(chuàng)作！贊賞

總結(jié)

以上是生活随笔為你收集整理的html长图滚动,Axure教程：长页或长图滚动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。