本文是模仿微信的第四篇內(nèi)容，主要講的內(nèi)容是下拉刷新，enjoy~

最近真的好忙，晚上又在忙著充電學(xué)Python，所以更新變慢了，不過(guò)木有事，小編雖然會(huì)遲到，但是絕不會(huì)缺席~O(∩_∩)O哈哈~

效果圖：

提醒：因?yàn)槲覀兠恳淮蔚母露际窃谠械脑突A(chǔ)上開(kāi)展的，因此原型會(huì)越來(lái)越復(fù)雜。效果描述：本次我們展現(xiàn)下拉刷新效果，下拉列表，出現(xiàn)刷新icon，松開(kāi)手指，頁(yè)面彈回，刷新結(jié)束后，刷新icon消失。

實(shí)現(xiàn)邏輯

元件.top 函數(shù)：獲取元件對(duì)象的上邊界坐標(biāo)值，拖動(dòng)頁(yè)面時(shí)，頁(yè)面top值超過(guò)一定程度的時(shí)候，讓頁(yè)面彈回到初始位置。向下拖動(dòng)頁(yè)面的時(shí)候，出現(xiàn)下拉刷新icon。

步驟1：元件準(zhǔn)備

準(zhǔn)備元件，我們準(zhǔn)備好朋友圈頁(yè)面的內(nèi)容，并將其轉(zhuǎn)換成動(dòng)態(tài)面板，準(zhǔn)備一個(gè)返回icon，一個(gè)相機(jī)icon和一個(gè)下拉刷新的gif圖。（gif圖已經(jīng)上傳到附件內(nèi)，我們就不具體演示了）

我們?cè)判?返回icon、相機(jī)icon、下拉刷新icon（隱藏）在頂，朋友圈內(nèi)容的動(dòng)態(tài)面板在底。

步驟2：交互

先簡(jiǎn)單講一下設(shè)置邏輯，我們?cè)偕蠄D：我們?cè)谕蟿?dòng)內(nèi)容動(dòng)態(tài)面板的時(shí)候?？赡芟蛏贤蟿?dòng)，可能向下拖動(dòng)，雖然向上拖動(dòng)和向下拖動(dòng)是設(shè)置在同一個(gè)交互內(nèi)的，但是我們?yōu)榱俗龅较吕⑿伦詣?dòng)彈回，那么就要設(shè)置兩種條件。我們讓動(dòng)態(tài)面板沿著Y軸自由拖動(dòng)，但是元件頂部超過(guò)一定的高度的時(shí)候，需要出現(xiàn)下拉刷新的icon，這就是下拉場(chǎng)景，同時(shí)在超過(guò)一定高度的時(shí)候，松開(kāi)手，這時(shí)候頁(yè)面會(huì)自動(dòng)彈回。

我們一起來(lái)看，選擇內(nèi)容動(dòng)態(tài)面板：

拖動(dòng)時(shí)，if this.top≤0，讓動(dòng)態(tài)面板隨著手指沿著Y軸移動(dòng)，設(shè)置邊界為頂部坐標(biāo)≤250，底部坐標(biāo)≥644，隱藏 下拉刷新icon。

else if，讓動(dòng)態(tài)面板隨著手指沿著Y軸移動(dòng)，設(shè)置邊界為頂部坐標(biāo)≤250，底部坐標(biāo)≥644，顯示下拉刷新icon。

如圖所示：

拖動(dòng)結(jié)束時(shí)，if this.top≥1，移動(dòng) 動(dòng)態(tài)面板 到 （0，0），等待 500ms，隱藏 下拉刷新icon。

（等待500ms是為了更好的模擬刷新等待的效果）

結(jié)語(yǔ)

本次原型內(nèi)容做在了左側(cè)的微信中。

原型文件可以通過(guò)下邊的鏈接下載：https://pan.baidu.com/s/1jub385QC4AuNxkBxAa6aFA密碼：q2cf

注意哦，我們的原型只能用Axure RP 9打開(kāi)哦。

最后：我們要不斷努力，不要白白浪費(fèi)我們吃的苦，共勉。

#專欄作家#

王得宇A(yù)IPM；公眾號(hào)：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議