AXURE制作手機(jī)下拉刷新效果交互原型
要求：
1、向下拉動(dòng)屏幕出現(xiàn)［可刷新］的提示。
2、刷新要有加載過(guò)程。
3、刷新完成后屏幕歸位。
拖入一個(gè)與手機(jī)模型屏幕同尺寸的 Dynamic Panel，命名為［mask］，其主要的作用是作為后續(xù)所有元素的容器，因?yàn)橐巡僮鞯目梢暦秶薅ㄔ谄聊坏目臻g內(nèi)。
在［mask］中拖入一個(gè)稍高于屏幕尺寸的 Dynamic Panel，命名為［screen］，高出的部分是用于存放下拉時(shí)出現(xiàn)的刷新提示，高度自定，這里我設(shè)了 50px，同時(shí)將［screen］的位置坐標(biāo)調(diào)整為 x0,y-50，目的是將刷新提示放置在可視范圍之外。
在［screen］中拖入一個(gè)與屏幕同尺寸的 Dynamic Panel，命名為［content］，添加兩個(gè) State，分別命名為［content-1］［content-2］，用于存放刷新前和刷新后的內(nèi)容，同時(shí)把底色調(diào)為白色之外的任意色，目的是與刷新區(qū)域做一個(gè)區(qū)別。
在［screen］中再拖入一個(gè)與屏幕同寬，高為 50px 的 Dynamic Panel，命名為［refresh］，添加兩個(gè) State，分別命名為［drag］［drag drop］，用來(lái)存放刷新前和加載時(shí)的不同狀態(tài)提示。
為［mask］添加 OnDrag 事件，并設(shè)置動(dòng)作 Move Panel，拖動(dòng)方式為 with drag y，即只能沿縱軸方向移動(dòng)。
為［mask］添加 OnDragDrop 事件，并設(shè)置動(dòng)作：
1、Set Panel state to State，將［refresh］的 State 改為［drag drop］，實(shí)現(xiàn)加載提示。
2、Wait Time，為加載過(guò)程設(shè)置一個(gè)延遲時(shí)間，比如 1000ms。
3、Set Panel state to State，將［content］的 State 改為［content-2］，實(shí)現(xiàn)刷新后的效果。
好了，現(xiàn)在下拉刷新的效果已經(jīng)可以實(shí)現(xiàn)了，但刷新后如何讓被下拉的屏幕歸位呢？這里就需要用到一個(gè)小技巧了。
拖入一個(gè)與屏幕同寬，高為 50px 的 Image Map Region 放置在屏幕的上方，命名為［header］保持它的下邊緣與［mask］的上邊緣有 2px～3px 的交集，用于判斷［mask］的拖動(dòng)位置，從而讓其自動(dòng)歸位。由于 Image Map Region 只是一個(gè)圖片熱點(diǎn)，所以在預(yù)覽時(shí)是不會(huì)被看到的。然后在［mask］的 OnDragDrop 事件中添加一個(gè)觸發(fā)條件，用于判斷［mask］的 area of widget 是否超出了［header］的范圍。
在條件下設(shè)置動(dòng)作：
1、Wait Time，由于之前的加載過(guò)程需要 1000ms，所以這里也要設(shè)置一個(gè)相同的延遲時(shí)間用以歸位。
2、Move Panel，讓?zhuān)踡ask］在加載結(jié)束后沿縱軸方向移動(dòng) ?50px，即將高為 50px 的刷新區(qū)域再移動(dòng)至可視范圍之外，實(shí)現(xiàn)自動(dòng)歸位的效果。
3、Set Panel state to State，最后將［refresh］的 State 再改回［drag］，以便于再次刷新時(shí)的文案的正確。
搞定，需要注意的是動(dòng)作的設(shè)置要遵從應(yīng)有的順序，否則就出亂子了。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。