作為一名產(chǎn)品經(jīng)理，在我們設(shè)計包含大量數(shù)據(jù)或者數(shù)據(jù)實時更新的頁面時，往往要在Axure原型上做出下拉刷新的效果，今天我們就來看看使用Axure實現(xiàn)下拉刷新效果的過程，圖文詳細(xì)，稍微有點(diǎn)長，請耐心觀看哦。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機(jī)+漢化包+安裝教程)

• 類型：輔助設(shè)計
• 大?。?/span>83.2MB
• 語言：簡體中文
• 時間：2019-04-26

查看詳情

1、在元件庫中拖一個動態(tài)面板至頁面并將大小調(diào)整至于手機(jī)外殼大小合適，如下圖；

2、雙擊動態(tài)面板區(qū)域后對面板進(jìn)行命名“數(shù)據(jù)面板”如下圖，本步驟不可省略，因為后面會再次用到幾個動態(tài)面板，為了容易進(jìn)行區(qū)分，所以此步驟不要省略；

3、雙擊數(shù)據(jù)面板的“State1”如下圖1，然后進(jìn)入數(shù)據(jù)面板內(nèi)部，如圖2；

4、在“數(shù)據(jù)面板”這個動態(tài)面板內(nèi)部再依次拖入兩個動態(tài)面板（將這兩個面板做成大小統(tǒng)一的面板），并分別進(jìn)行命名：

（1）原始面板，在最底層，此面板為頁面上未刷新時的展示，位置（0,0）；

（2）刷新面板，在最頂層，此面板為頁面上下拉刷新時的展示，位置（0，-55）；

原始面板與刷新面板之所以在Y軸有一個差距，是因為刷新面板要靠上一些，這樣下拉才會出效果。

5、在原始面板版和刷新面板里填充相同內(nèi)容，如下圖1，此步驟是為了可以在發(fā)布后可以看出頁面效果；

6、將刷新面板設(shè)置為隱藏，方法為：單機(jī)選中刷新面板，右擊后選擇“設(shè)為隱藏”，如下圖，此步驟是因為我們在頁面展示時只可展示一個動態(tài)面板的內(nèi)容；

7、雙擊刷新面板，通過點(diǎn)擊“加號”創(chuàng)建三個狀態(tài)，名稱分別為：下拉刷新、釋放、刷新中，如下圖

8、選中“數(shù)據(jù)面板”，對它做“拖動時”效果設(shè)置，如下圖：

9、對數(shù)據(jù)面板中的原始面板進(jìn)行“移動設(shè)置”如下圖，這里的設(shè)置是為了下拉時頁面最多可以下拉到什么位置；

10、對刷新面板進(jìn)行“設(shè)置動態(tài)面板狀態(tài)”設(shè)置，如下圖：

11、對刷新面板進(jìn)行“移動”設(shè)置，如下圖1：此步驟界限函數(shù)為：[[content.y]]，然后對[[content.y]]進(jìn)行設(shè)置如下圖2；

12、選中“數(shù)據(jù)面板”后，雙擊最右方的“case1”對用例進(jìn)行編輯如下圖：

13、進(jìn)行條件設(shè)立，按下圖進(jìn)行編輯即可；

14、對上一步的條件進(jìn)行函數(shù)設(shè)置如下圖：到此步驟為止，下拉的效果已經(jīng)完成，后面繼續(xù)對其他效果進(jìn)行編輯

15、選中“數(shù)據(jù)面板”后雙擊“拖動結(jié)束時”如下圖

16、單擊“移動”對“原始面板”進(jìn)行設(shè)置如下圖；

17、再次單擊“移動”對刷新面板進(jìn)行設(shè)置，如下圖；這里的函數(shù)設(shè)置為[[content.y]]

18、點(diǎn)擊“設(shè)置動態(tài)面板設(shè)置”對刷新面板進(jìn)行設(shè)置，如下圖；

19、點(diǎn)擊“旋轉(zhuǎn)”對刷新中的圖片進(jìn)行設(shè)置如下圖；

20、點(diǎn)擊“等待”對刷新中的時間進(jìn)行設(shè)置，如下圖；

21、點(diǎn)擊“移動”對原始面板進(jìn)行設(shè)置，如下圖；

22、點(diǎn)擊“移動”對刷新面板進(jìn)行設(shè)置，如下圖；此處的移動函數(shù)為對y進(jìn)行設(shè)置，函數(shù)為：[[Target.height]]

23、單擊“設(shè)置動態(tài)面板設(shè)置”對原始面板進(jìn)行設(shè)置，如下圖；

24、單擊等待，進(jìn)行設(shè)置如下圖；

25、到此步已經(jīng)完成了刷新效果的創(chuàng)建，下圖為效果圖：

注意事項

創(chuàng)建動態(tài)面板時一定要為各個動態(tài)面板和動態(tài)面板的狀態(tài)進(jìn)行命名，否則后期再對各個面板進(jìn)行設(shè)置時就會非常痛苦

本方法共用到了兩個函數(shù)：content、Target，需要注意的是這里是區(qū)分大小寫的

以上就是使用Axure實現(xiàn)下拉刷新效果的方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

axure怎么制作各個頁面之間自由切換效果?

Axure rp怎么實現(xiàn)鼠標(biāo)點(diǎn)擊圖形變色的效果?

Axure怎么制作日歷日期選擇框效果?

最新評論