捲軸怎麼調出來
網上有好多關於 Axure 的教程，但是根據我學習的過程我覺得 Axure 完全不需要你完整的去花一段時間去刻意的學習，需要什麼效果但是沒有思路上網可以查到對應的方案完成自己想要的效果就可以了，所以我也希望可以將我之前查詢過的教程整理出來給需要的同學們參考。
本次將會一起說下 Axure 中拖動事件和滾動事件，大家可在下文中按大標題快速找到對應的教程，不明白有什麼區別的同學可以大概完整瀏覽一下。
Axure 中的拖動事件
應用場景如：移動位置；滑動驗證；拖動上傳；拖動排序等。
操作方式： pc 端：滑鼠左鍵按住移動 手機端：手指按住移動即可。
本次我們以一個簡單的滑動滑塊為例：
（1）首先在 Axure 中畫出一個簡單的滑塊
（2）將原型滑塊右鍵設定為動態面板（因為動態面板才可以設定拖動和滾動事件）
（3）給動態面板設定拖動事件，拖動時讓滑塊動態面板水平移動
（4）完成，進行預覽
我們預覽時會發現滑塊會超出矩形線段的範圍，這並不是我們想要的效果。
（5）設定拖動的邊界（演示中左側大於 40px，右側小於 610px）
（6）操作完成，我們預覽來看一下效果吧
線上預覽地址：https：//lanhuapp。com/url/HgX0C
Axure 中的滾動事件
應用場景如：長頁面的顯示；線上滾動是出現置頂按鈕；滾動切換Tab等
操作方式： pc 端：滑鼠滾輪上下滾動 手機端：上下滑動即可
本次我們以 Chrome 的 Infinity 外掛切換效果為例：
（1）首先在 Axure 中畫出一個簡單的線框圖（又懶又強迫症，我就先截圖了）
（2）調整第一頁和第二頁的位置後合併為分組，同時建立一個動態面板
（3）調整動態面板的大小，這是很重要的一步，如果你之前的嘗試沒有成功，那麼很可能是這步的問題。滾動只有動態面板可以上下滾動時，也就是動態面板區域要比內容小。故我們將動態面板調整為比內容小 1px 的高度，和合適的寬度。（沒有出現捲軸的可以在動態面板上右鍵選擇顯示捲軸）
（4）給動態面板設定滾動事件，分別設定向上和向下滾動時移動到我們想要的位置，為了不那麼僵硬我們增加一個彈性動畫，時間 500ms。
（5）現在我們想要的效果已經完成了，但是作為完美主義，我們最後吧捲軸隱藏一下吧
（6）我們期望的效果已經完美完成了，最後我們順便把上面提到到拖動事件也加一下吧。分別設定向左拖動和向右拖動是移動到對應的位置，同時設定拖動時隨著拖動一起移動（邊界左右稍微增加一點距離，效果會更好哦）
預覽地址：https：//lanhuapp。com/url/ru69F
到這裡本次的教程就結束了，大家如果有其他什麼想要的實現的效果可以在下面留言，我們一起學習探討哈。
本文由 @糊蘿蔔粥 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議