網(wǎng)上有好多關于 Axure 的教程，但是根據(jù)我學習的過程我覺得 Axure 完全不需要你完整的去花一段時間去刻意的學習，需要什么效果但是沒有思路上網(wǎng)可以查到對應的方案完成自己想要的效果就可以了，所以我也希望可以將我之前查詢過的教程整理出來給需要的同學們參考。

本次將會一起說下 Axure 中拖動事件和滾動事件，大家可在下文中按大標題快速找到對應的教程，不明白有什么區(qū)別的同學可以大概完整瀏覽一下。

Axure 中的拖動事件

應用場景如：移動位置；滑動驗證；拖動上傳；拖動排序等。

操作方式： pc 端：鼠標左鍵按住移動 手機端：手指按住移動即可。

本次我們以一個簡單的滑動滑塊為例：

（1）首先在 Axure 中畫出一個簡單的滑塊

（2）將原型滑塊右鍵設置為動態(tài)面板（因為動態(tài)面板才可以設置拖動和滾動事件）

（3）給動態(tài)面板設置拖動事件，拖動時讓滑塊動態(tài)面板水平移動

（4）完成，進行預覽

我們預覽時會發(fā)現(xiàn)滑塊會超出矩形線段的范圍，這并不是我們想要的效果。

（5）設置拖動的邊界（演示中左側大于 40px，右側小于 610px）

（6）操作完成，我們預覽來看一下效果吧

在線預覽地址：https://lanhuapp.com/url/HgX0C

Axure 中的滾動事件

應用場景如：長頁面的顯示；線上滾動是出現(xiàn)置頂按鈕；滾動切換Tab等

操作方式： pc 端：鼠標滾輪上下滾動? 手機端：上下滑動即可

本次我們以 Chrome 的 Infinity 插件切換效果為例：

（1）首先在 Axure 中畫出一個簡單的線框圖（又懶又強迫癥，我就先截圖了）

（2）調整第一頁和第二頁的位置后合并為分組，同時創(chuàng)建一個動態(tài)面板

（3）調整動態(tài)面板的大小，這是很重要的一步，如果你之前的嘗試沒有成功，那么很可能是這步的問題。滾動只有動態(tài)面板可以上下滾動時，也就是動態(tài)面板區(qū)域要比內容小。故我們將動態(tài)面板調整為比內容小 1px 的高度，和合適的寬度。（沒有出現(xiàn)滾動條的可以在動態(tài)面板上右鍵選擇顯示滾動條）

（4）給動態(tài)面板設置滾動事件，分別設置向上和向下滾動時移動到我們想要的位置，為了不那么僵硬我們增加一個彈性動畫，時間 500ms。

（5）現(xiàn)在我們想要的效果已經(jīng)完成了，但是作為完美主義，我們最后吧滾動條隱藏一下吧

（6）我們期望的效果已經(jīng)完美完成了，最后我們順便把上面提到到拖動事件也加一下吧。分別設置向左拖動和向右拖動是移動到對應的位置，同時設置拖動時隨著拖動一起移動（邊界左右稍微增加一點距離，效果會更好哦）

預覽地址：https://lanhuapp.com/url/ru69F

到這里本次的教程就結束了，大家如果有其他什么想要的實現(xiàn)的效果可以在下面留言，我們一起學習探討哈。

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

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