?隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展鞍陨，手機(jī)已成為生活必不可少的一部分步淹。我們的手機(jī)中安裝了各種各樣的app（應(yīng)用程序），在使用app的過程中诚撵，上下滑屏與下拉刷新已是非常常見的交互操作缭裆，今天就來總結(jié)一下如何使用axure實(shí)現(xiàn)APP中上下滑動(dòng)與下拉刷新的效果（PS：滑到最后可以看到最終效果哦^_^）。

一寿烟、元件準(zhǔn)備

動(dòng)態(tài)面板：兩個(gè)澈驼，一個(gè)用來限定內(nèi)容在手機(jī)中的顯示區(qū)域（這里命名為：顯示區(qū)域面板），一個(gè)用來滑動(dòng)（這里命名為：滑動(dòng)面板）筛武；

熱區(qū)：兩個(gè)缝其，分別命名為刷新、底部徘六，其中刷新熱區(qū)用來觸發(fā)刷新操作内边，底部熱區(qū)用來觸發(fā)面板向上滑動(dòng)超出范圍時(shí)的彈回操作；

文本：分別命名為“正在刷新”與“下拉刷新”待锈，表示刷新狀態(tài)漠其；

其他：手機(jī)殼（用來承載APP顯示內(nèi)容，以下簡稱為“手機(jī)”）、顯示內(nèi)容（APP頁面需呈現(xiàn)的內(nèi)容）等辉懒。

元件list及順序如下圖所示：

二阳惹、詳細(xì)步驟

1.添加動(dòng)態(tài)面板-在手機(jī)內(nèi)容顯示區(qū)域添加動(dòng)態(tài)面板“顯示區(qū)域面板”，動(dòng)態(tài)面板大小與手機(jī)屏幕區(qū)域相同眶俩，這里“顯示區(qū)域面板”的高為500；

2.嵌套動(dòng)態(tài)面板-雙擊打開“顯示區(qū)域面板”的state1(狀態(tài)1)快鱼，并在里面添加動(dòng)態(tài)面板“滑動(dòng)面板”颠印，注意“滑動(dòng)面板”高度要大于等于“顯示區(qū)域面板”高度，這里將“滑動(dòng)面板”高度設(shè)置為800抹竹；

3.為動(dòng)態(tài)面板添加內(nèi)容-雙擊打開“滑動(dòng)面板”的state1(狀態(tài)1)线罕，在里面添加所需展示的內(nèi)容，這里僅簡單添加了一些內(nèi)容作為示意：填充面板背景色為灰色窃判，并拖入了一些文本钞楼、按鈕等，如下圖所示：

此時(shí)“顯示區(qū)域面板”的樣式如下圖所示：

4.添加與刷新相關(guān)的文本-在手機(jī)上層袄琳、“顯示區(qū)域面板”下層（這里層級關(guān)系務(wù)必不能顛倒询件，為了保證層級關(guān)系正確，可以暫時(shí)將“顯示區(qū)域面板”從手機(jī)中移走）唆樊，添加用以提示刷新狀態(tài)的文本宛琅，并分別命名為“正在刷新”與“下拉刷新 ”，如下圖所示：

添加完成后逗旁，把“正在刷新”文本隱藏嘿辟；

5.添加熱區(qū)-在“下拉刷新”上方添加一個(gè)熱區(qū)，命名為“刷新”片效，在手機(jī)屏幕底部添加一個(gè)熱區(qū)红伦，命名為“底部”，如下圖所示：

熱區(qū)與刷新相關(guān)文本添加完成后淀衣，即可將拖走的“顯示區(qū)域面板”拖回至手機(jī)屏幕區(qū)域昙读；

6.添加拖動(dòng)時(shí)事件與用例-選中“顯示區(qū)域面板”，為其添加ondrag（拖動(dòng)時(shí)）事件舌缤，事件用例為：沿y軸移動(dòng)“滑動(dòng)面板”箕戳，并添加邊界限制[頂部<=86,底部>=470]，事件用例設(shè)置如下圖所示：

這里有三點(diǎn)需要注意：一是事件的主體是“顯示區(qū)域面板”国撵，而事件的動(dòng)作主體是“滑動(dòng)面板”陵吸，一定不要弄錯(cuò)啦！二是關(guān)于面板移動(dòng)的邊界限制介牙，設(shè)置頂部小于等于86是為了限制面板最多可移動(dòng)到“下拉刷新”文本下面壮虫，因?yàn)樵偻乱苿?dòng)也沒什么意義了呀，同理設(shè)置底部大于等于470是為了限制面板向上移動(dòng)的距離，因?yàn)椴还芟蛏弦苿?dòng)多遠(yuǎn)囚似，面板底部總是需要回歸到屏幕底部剩拢，所以設(shè)置邊界限制效果會更好一點(diǎn)；三有人可能會想86饶唤、470是如何計(jì)算出來的呢徐伐？這里結(jié)合下圖詳細(xì)解釋一下：

由于坐標(biāo)是以動(dòng)態(tài)面板state(狀態(tài))中的區(qū)域所在位置為基準(zhǔn)，不是以首頁手機(jī)的位置為基準(zhǔn)募狂，而動(dòng)態(tài)面板狀態(tài)中區(qū)域坐標(biāo)固定為（0,0）（如下圖所示）,因此面板移動(dòng)的頂部top邊界坐標(biāo)即為：108-50+14=72办素，這里為了使面板與“釋放立即刷新”文字挨得不要太近，在72的基礎(chǔ)上又增加了14祸穷，得到了現(xiàn)在的值86性穿；同理，值470也可以計(jì)算出雷滚，就不再多說啦需曾！

7.添加拖動(dòng)結(jié)束時(shí)事件與用例-選中“顯示區(qū)域面板”，為其添加ondragdrop（拖動(dòng)結(jié)束時(shí)）事件祈远，第一種情況case1：如果“滑動(dòng)面板”沒有接觸到底部熱區(qū)（由于用的是英文版axure呆万，翻譯不準(zhǔn)確，見諒绊含，意會就好哈）桑嘶，就將“滑動(dòng)面板”移動(dòng)到（0，-300）（這里-300為“滑動(dòng)面板”高度減去“顯示區(qū)域面板”高度）躬充，即：使“滑動(dòng)面板”底部移動(dòng)到手機(jī)屏幕的底部逃顶，具體設(shè)置如下圖所示：

第二種情況case2：如果“滑動(dòng)面板”沒有接觸到刷新熱區(qū)，就將“滑動(dòng)面板”移動(dòng)至（0,50）充甚，即“正在刷新”文本的下面以政，同時(shí)顯示“正在刷新”文本，等待1000ms后伴找，將“正在刷新”文本修改為“刷新成功”盈蛮；之后再等待500ms，將滑動(dòng)面板移動(dòng)到（0,0）技矮，即手機(jī)屏幕頂部抖誉；最后將“刷新成功”恢復(fù)至“正在刷新”，并隱藏“正在刷新”文本衰倦，這一步很重要哈袒炉，是為了可以重復(fù)實(shí)現(xiàn)下拉刷新效果。具體設(shè)置如下圖所示：

三樊零、效果展示

最終實(shí)現(xiàn)效果如下圖所示：