文章介紹了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],以便於再次刷新時的文案的正確。
搞定,需要注意的是動作的設置要遵從應有的順序,否則就出亂子了。