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

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

• 類型：輔助設(shè)計(jì)
• 大小：83.2MB
• 語言：簡(jiǎn)體中文
• 時(shí)間：2019-04-26

查看詳情

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

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

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

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

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

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

原始面板與刷新面板之所以在Y軸有一個(gè)差距，是因?yàn)樗⑿旅姘逡可弦恍@樣下拉才會(huì)出效果。

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

6、將刷新面板設(shè)置為隱藏，方法為：?jiǎn)螜C(jī)選中刷新面板，右擊后選擇“設(shè)為隱藏”，如下圖，此步驟是因?yàn)槲覀冊(cè)陧撁嬲故緯r(shí)只可展示一個(gè)動(dòng)態(tài)面板的內(nèi)容；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意事項(xiàng)

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

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

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

相關(guān)推薦：

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

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

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

最新評(píng)論