Axure頁面怎么制作下拉刷新效果? Axure下拉刷新實現(xiàn)方法
我要評論作為一名產品經理，在我們設計包含大量數據或者數據實時更新的頁面時，往往要在Axure原型上做出下拉刷新的效果，今天我們就來看看使用Axure實現(xiàn)下拉刷新效果的過程，圖文詳細，稍微有點長，請耐心觀看哦。
1、在元件庫中拖一個動態(tài)面板至頁面并將大小調整至于手機外殼大小合適，如下圖；
2、雙擊動態(tài)面板區(qū)域后對面板進行命名“數據面板”如下圖，本步驟不可省略，因為后面會再次用到幾個動態(tài)面板，為了容易進行區(qū)分，所以此步驟不要省略；
3、雙擊數據面板的“State1”如下圖1，然后進入數據面板內部，如圖2；
4、在“數據面板”這個動態(tài)面板內部再依次拖入兩個動態(tài)面板（將這兩個面板做成大小統(tǒng)一的面板），并分別進行命名：
（1）原始面板，在最底層，此面板為頁面上未刷新時的展示，位置（0,0）；
（2）刷新面板，在最頂層，此面板為頁面上下拉刷新時的展示，位置（0，-55）；
原始面板與刷新面板之所以在Y軸有一個差距，是因為刷新面板要靠上一些，這樣下拉才會出效果。
5、在原始面板版和刷新面板里填充相同內容，如下圖1，此步驟是為了可以在發(fā)布后可以看出頁面效果；
6、將刷新面板設置為隱藏，方法為：單機選中刷新面板，右擊后選擇“設為隱藏”，如下圖，此步驟是因為我們在頁面展示時只可展示一個動態(tài)面板的內容；
7、雙擊刷新面板，通過點擊“加號”創(chuàng)建三個狀態(tài)，名稱分別為：下拉刷新、釋放、刷新中，如下圖
8、選中“數據面板”，對它做“拖動時”效果設置，如下圖：
9、對數據面板中的原始面板進行“移動設置”如下圖，這里的設置是為了下拉時頁面最多可以下拉到什么位置；
10、對刷新面板進行“設置動態(tài)面板狀態(tài)”設置，如下圖：
11、對刷新面板進行“移動”設置，如下圖1：此步驟界限函數為：[[content.y]]，然后對[[content.y]]進行設置如下圖2；
12、選中“數據面板”后，雙擊最右方的“case1”對用例進行編輯如下圖：
13、進行條件設立，按下圖進行編輯即可；
14、對上一步的條件進行函數設置如下圖：到此步驟為止，下拉的效果已經完成，后面繼續(xù)對其他效果進行編輯
15、選中“數據面板”后雙擊“拖動結束時”如下圖
16、單擊“移動”對“原始面板”進行設置如下圖；
17、再次單擊“移動”對刷新面板進行設置，如下圖；這里的函數設置為[[content.y]]
18、點擊“設置動態(tài)面板設置”對刷新面板進行設置，如下圖；
19、點擊“旋轉”對刷新中的圖片進行設置如下圖；
20、點擊“等待”對刷新中的時間進行設置，如下圖；
21、點擊“移動”對原始面板進行設置，如下圖；
22、點擊“移動”對刷新面板進行設置，如下圖；此處的移動函數為對y進行設置，函數為：[[Target.height]]
23、單擊“設置動態(tài)面板設置”對原始面板進行設置，如下圖；
24、單擊等待，進行設置如下圖；
25、到此步已經完成了刷新效果的創(chuàng)建，下圖為效果圖：
注意事項
創(chuàng)建動態(tài)面板時一定要為各個動態(tài)面板和動態(tài)面板的狀態(tài)進行命名，否則后期再對各個面板進行設置時就會非常痛苦
本方法共用到了兩個函數：content、Target，需要注意的是這里是區(qū)分大小寫的
以上就是使用Axure實現(xiàn)下拉刷新效果的方法，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
Axure rp怎么實現(xiàn)鼠標點擊圖形變色的效果?
相關文章
Axure怎么設置變量值？Axure添加動作的時候，需要設置變量值，該怎么設置呢？這是基礎教程，下面我們就來看看Axure動作變量值的設置教程，需要的朋友可以參考下2020-12-01
Axure RP怎么重置視圖? Axure恢復默認視圖的技巧
Axure RP怎么重置視圖？Axure RP視圖根據自己的使用習慣更改了一下，但是發(fā)現(xiàn)很亂，想要恢復默認設置，該怎么操作呢？下面我們就來看看Axure恢復默認視圖的技巧，需要的朋2020-11-13
Axure怎么制作拖動滑塊效果? Axure滑塊動畫的制作方法
Axure怎么制作拖動滑塊效果？手機上有很多可以拖動滑塊的效果，如不音量上下滑動，亮度是左右滑動，該怎么制作這個效果呢？下面我們就來看看Axure滑塊動畫的制作方法，需要2020-11-06
Axure外部組件庫怎么導入? Axure添加外部組件庫的技巧
Axure外部組件庫怎么導入？Axure中想要添加外部組件庫，該怎么添加呢？下面我們就來看看Axure添加外部組件庫的技巧，需要的朋友可以參考下2020-11-06
Axure怎么設置重復的背景圖片? Axure背景設置為重復圖片的技巧
Axure怎么設置重復的背景圖片？Axure中背景填充為圖片的時候，默認是不重復的，想要設置為重復背景圖，該怎么設置呢？下面我們就來看看Axure背景設置為重復圖片的技巧，需2020-09-30
Axure RP便簽控件怎么用? Axure添加便簽控件的技巧
Axure RP便簽控件怎么用？Axure RP在制作網頁原型的時候，想要給頁面添加便簽控件，該怎么添加呢？下面我們就來看看Axure添加便簽控件的技巧，需要的朋友可以參考下2020-09-22
Axure怎么創(chuàng)建頁面常見的Tab頁效果？Axure中經常制作頁面，想要制作Tab頁效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2020-04-06
axure怎么制作餅圖效果？axure中想要制作一個餅形圖，該怎么制作餅形圖呢？下面我們就來看看axure餅圖制作方法，需要的朋友可以參考下2020-02-07
Axure怎么制作帶有提示文字的文本框？Axure制作頁面的時候，想要實現(xiàn)輸入文本框內的提示文字，該怎么操作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2020-02-04
axure怎么插入視頻？axure在制作網頁原型的時候，想要給頁面添加視頻，該怎么插入視頻呢？下面我們就來看看axure頁面添加視頻的教程，需要的朋友可以參考下2020-02-03
