起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure RP 9 教程：模擬微信系列（4）——下拉刷新
本文是模仿微信的第四篇內(nèi)容，主要講的內(nèi)容是下拉刷新，enjoy~
最近真的好忙，晚上又在忙著充電學(xué)Python，所以更新變慢了，不過木有事，小編雖然會遲到，但是絕不會缺席~O(∩_∩)O哈哈~
效果圖：
提醒：因為我們每一次的更新都是在原有的原型基礎(chǔ)上開展的，因此原型會越來越復(fù)雜。效果描述：本次我們展現(xiàn)下拉刷新效果，下拉列表，出現(xiàn)刷新icon，松開手指，頁面彈回，刷新結(jié)束后，刷新icon消失。
實現(xiàn)邏輯
元件.top 函數(shù)：獲取元件對象的上邊界坐標(biāo)值，拖動頁面時，頁面top值超過一定程度的時候，讓頁面彈回到初始位置。向下拖動頁面的時候，出現(xiàn)下拉刷新icon。
步驟1：元件準(zhǔn)備
準(zhǔn)備元件，我們準(zhǔn)備好朋友圈頁面的內(nèi)容，并將其轉(zhuǎn)換成動態(tài)面板，準(zhǔn)備一個返回icon，一個相機(jī)icon和一個下拉刷新的gif圖。（gif圖已經(jīng)上傳到附件內(nèi)，我們就不具體演示了）
我們元件排序:返回icon、相機(jī)icon、下拉刷新icon（隱藏）在頂，朋友圈內(nèi)容的動態(tài)面板在底。
步驟2：交互
先簡單講一下設(shè)置邏輯，我們再上圖：我們在拖動內(nèi)容動態(tài)面板的時候?？赡芟蛏贤蟿?，可能向下拖動，雖然向上拖動和向下拖動是設(shè)置在同一個交互內(nèi)的，但是我們?yōu)榱俗龅较吕⑿伦詣訌椈兀敲淳鸵O(shè)置兩種條件。我們讓動態(tài)面板沿著Y軸自由拖動，但是元件頂部超過一定的高度的時候，需要出現(xiàn)下拉刷新的icon，這就是下拉場景，同時在超過一定高度的時候，松開手，這時候頁面會自動彈回。
我們一起來看，選擇內(nèi)容動態(tài)面板：
拖動時，if this.top≤0，讓動態(tài)面板隨著手指沿著Y軸移動，設(shè)置邊界為頂部坐標(biāo)≤250，底部坐標(biāo)≥644，隱藏 下拉刷新icon。
else if，讓動態(tài)面板隨著手指沿著Y軸移動，設(shè)置邊界為頂部坐標(biāo)≤250，底部坐標(biāo)≥644，顯示下拉刷新icon。
如圖所示：
拖動結(jié)束時，if this.top≥1，移動 動態(tài)面板 到 （0，0），等待 500ms，隱藏 下拉刷新icon。
（等待500ms是為了更好的模擬刷新等待的效果）
結(jié)語
本次原型內(nèi)容做在了左側(cè)的微信中。
原型文件可以通過下邊的鏈接下載：https://pan.baidu.com/s/1jub385QC4AuNxkBxAa6aFA密碼：q2cf
注意哦，我們的原型只能用Axure RP 9打開哦。
最后：我們要不斷努力，不要白白浪費我們吃的苦，共勉。
#專欄作家#
王得宇A(yù)IPM；公眾號：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
看完一篇原型設(shè)計文章啦，感覺還是不太會？
想從0基礎(chǔ)開始學(xué)習(xí)Axure么？推薦你找Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：大禮包
?? 領(lǐng)取原型設(shè)計大禮包，多學(xué)多練，你也能成為原型設(shè)計高手哦！