AXURE互動例項介紹

文章介紹了AXURE互動例項介紹，下面我們就與大家一起分享。就跟隨本站小編一起去了解下吧，想了解更多相關資訊請持續關注我們應屆畢業生考試網!

1、向下拉動螢幕出現[可重新整理]的提示。

2、重新整理要有載入過程。

3、重新整理完成後螢幕歸位。

拖入一個與手機模型螢幕同尺寸的 Dynamic Panel，命名為[mask]，其主要的作用是作為後續所有元素的容器，因為要把操作的可視範圍限定在螢幕的空間內。

在[mask]中拖入一個稍高於螢幕尺寸的 Dynamic Panel，命名為[screen]，高出的部分是用於存放下拉時出現的重新整理提示，高度自定，這裡我設了 50px，同時將[screen]的位置座標調整為 x0,y-50，目的是將重新整理提示放置在可視範圍之外。

在[screen]中拖入一個與螢幕同尺寸的 Dynamic Panel，命名為[content]，新增兩個 State，分別命名為[content-1][content-2]，用於存放重新整理前和重新整理後的內容，同時把底色調為白色之外的任意色，目的是與重新整理區域做一個區別。

在[screen]中再拖入一個與螢幕同寬，高為 50px 的 Dynamic Panel，命名為[refresh]，新增兩個 State，分別命名為[drag][drag drop]，用來存放重新整理前和載入時的'不同狀態提示。

為[mask]新增 OnDrag 事件，並設定動作 Move Panel，拖動方式為 with drag y，即只能沿縱軸方向移動。

為[mask]新增 OnDragDrop 事件，並設定動作：

1、Set Panel state to State，將[refresh]的 State 改為[drag drop]，實現載入提示。

2、Wait Time，為載入過程設定一個延遲時間，比如 1000ms。

3、Set Panel state to State，將[content]的 State 改為[content-2]，實現重新整理後的效果。

好了，現在下拉重新整理的效果已經可以實現了，但重新整理後如何讓被下拉的螢幕歸位呢?這裡就需要用到一個小技巧了。

拖入一個與螢幕同寬，高為 50px 的 Image Map Region 放置在螢幕的上方，命名為[header]保持它的下邊緣與[mask]的上邊緣有 2px～3px 的交集，用於判斷[mask]的拖動位置，從而讓其自動歸位。由於 Image Map Region 只是一個圖片熱點，所以在預覽時是不會被看到的。然後在[mask]的 OnDragDrop 事件中新增一個觸發條件，用於判斷[mask]的 area of widget 是否超出了[header]的範圍。

在條件下設定動作：

1、Wait Time，由於之前的載入過程需要 1000ms，所以這裡也要設定一個相同的延遲時間用以歸位。

2、Move Panel，讓[mask]在載入結束後沿縱軸方向移動 −50px，即將高為 50px 的重新整理區域再移動至可視範圍之外，實現自動歸位的效果。

3、Set Panel state to State，最後將[refresh]的 State 再改回[drag]，以便於再次重新整理時的文案的正確。

搞定，需要注意的是動作的設定要遵從應有的順序，否則就出亂子了。