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

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

Axure 中的拖動(dòng)事件

應(yīng)用場(chǎng)景如：移動(dòng)位置；滑動(dòng)驗(yàn)證；拖動(dòng)上傳；拖動(dòng)排序等。

操作方式： pc 端：鼠標(biāo)左鍵按住移動(dòng) 手機(jī)端：手指按住移動(dòng)即可。

本次我們以一個(gè)簡(jiǎn)單的滑動(dòng)滑塊為例：

（1）首先在 Axure 中畫出一個(gè)簡(jiǎn)單的滑塊

（2）將原型滑塊右鍵設(shè)置為動(dòng)態(tài)面板（因?yàn)閯?dòng)態(tài)面板才可以設(shè)置拖動(dòng)和滾動(dòng)事件）

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

（4）完成，進(jìn)行預(yù)覽

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

（5）設(shè)置拖動(dòng)的邊界（演示中左側(cè)大于 40px，右側(cè)小于 610px）

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

在線預(yù)覽地址：https://lanhuapp.com/url/HgX0C

Axure 中的滾動(dòng)事件

應(yīng)用場(chǎng)景如：長(zhǎng)頁(yè)面的顯示；線上滾動(dòng)是出現(xiàn)置頂按鈕；滾動(dòng)切換Tab等

操作方式： pc 端：鼠標(biāo)滾輪上下滾動(dòng)? 手機(jī)端：上下滑動(dòng)即可

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

（1）首先在 Axure 中畫出一個(gè)簡(jiǎn)單的線框圖（又懶又強(qiáng)迫癥，我就先截圖了）

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

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

（4）給動(dòng)態(tài)面板設(shè)置滾動(dòng)事件，分別設(shè)置向上和向下滾動(dòng)時(shí)移動(dòng)到我們想要的位置，為了不那么僵硬我們?cè)黾右粋€(gè)彈性動(dòng)畫，時(shí)間 500ms。

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

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

預(yù)覽地址：https://lanhuapp.com/url/ru69F

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

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

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