看一看是微信最新開放不久的功能，以前是隱藏在搜索框下方“朋友圈熱文”。進入后可以查看推送給自己感興趣的文章。在文章列表里，下拉后釋放，會自動更新些新的文章。在等待的過程中，上方有三個小圓圈來回切換的動畫：

這種切換非常類似微博的下拉刷新操作，今天我們通過動態(tài)面板+中繼器的方式實現(xiàn)這種下拉刷新的效果。

點擊這里查看在線演示效果。

一、界面布局

1.添加標(biāo)題欄

（1）添加一個矩形，大小為480*56，背景顏色為#38393E，文字左對齊，左邊距60，左邊空出的位置用來放返回箭頭圖標(biāo)。雙擊矩形，設(shè)置文字內(nèi)容為“看一看”，文字顏色為白色，大小18。

（2）從微信里截圖，取一下標(biāo)題欄的返回圖標(biāo)，粘貼過來，調(diào)整好大小，放在左邊。

（3）添加個矩形框，大小480*600，放在標(biāo)題欄下方，作為內(nèi)容背景。

（4）添加個中繼器，命名msg_list，用來顯示文章列表，后面說明中繼器中的元件布局。

（5）為了響應(yīng)下拉操作，我們選擇中繼器，右鍵轉(zhuǎn)換為動態(tài)面板，命名為list，調(diào)整list大小為480*600，動態(tài)面板背景設(shè)置為白色，設(shè)置動態(tài)面板自動顯示垂直滾動條屬性。

（6）添加一個灰色圓形，取消邊框，大小為8*8。復(fù)制兩個，并將第一個圓形背景設(shè)置為橙色，三個水平分布。

（7）選擇三個小圓形，右鍵轉(zhuǎn)換為動態(tài)面板，命名為index，然后復(fù)制狀態(tài)1為狀態(tài)2、狀態(tài)3。

（8）雙擊動態(tài)面板的狀態(tài)2，設(shè)置第2個圓形為橙色。同理設(shè)置動態(tài)面板狀態(tài)3，設(shè)置第3個圓形為橙色。

（9）選擇動態(tài)面板list，右鍵設(shè)置為最上層，把指示器動畫index擋住。

（10）設(shè)置中繼器的布局樣式，雙擊msg_list打開，以下面的布局為例。

刪除默認(rèn)的矩形框，添加兩個文本標(biāo)簽，一個圖片，一個水平分割線，布局示意如下：

分別命名為title、author、image。

界面布局部分已經(jīng)準(zhǔn)備完畢。

下面添加事件處理，處理下拉事件，列表數(shù)據(jù)自動添加，以及指示器index的切換動畫。

二、事件處理

1.動態(tài)面板list的拖動事件

（1）拖動時事件：選擇動態(tài)面板list，雙擊“拖動時”事件。

添加移動操作，選擇當(dāng)前元件，設(shè)置移動方向為“垂直拖動”。

（2）移動結(jié)束時事件：在拖動結(jié)束時，顯示動態(tài)面板指示器index，顯示消息加載動畫。

在鼠標(biāo)松開后，先移動到距離頂部（0，110）的位置，等待1秒鐘，為了顯示后面的加載動畫。然后再移動到最初的位置（0，56）。移動的方式為“絕對位置”，動畫效果為緩慢退出，時間為300毫秒

2. 動態(tài)面板index通過循環(huán)顯示3個狀態(tài)來顯示加載動畫

將動態(tài)面板list向下拖一點，顯示出動態(tài)面板index。

（1）選擇動態(tài)面板index，添加載入時事件，設(shè)置狀態(tài)為State2。

這樣設(shè)置的目的是觸發(fā)它的狀態(tài)改變時事件，后面通過狀態(tài)改變時事件來設(shè)置自動循環(huán)顯示3個狀態(tài)。

（2）添加狀態(tài)改變時事件，設(shè)置選擇狀態(tài)為”Next“，勾選向后循環(huán)，循環(huán)間隔為300毫秒。

（3）修改中繼器”每項加載時“事件，兩個標(biāo)簽分別顯示標(biāo)題和名稱，圖片顯示縮略圖。

先來修改中繼器的表格數(shù)據(jù)，修改Column0為title，添加author和image，準(zhǔn)備好如下數(shù)據(jù)（圖片以人人都是產(chǎn)品經(jīng)理網(wǎng)站上原型帖子的縮略圖為例）：

添加”每項加載時“事件處理：

設(shè)置標(biāo)簽分別顯示中繼器的title和author，設(shè)置圖片image的default值為Item.image。

（4）在刷新動畫顯示完成之后，往列表里添加數(shù)據(jù)，這里模擬再往中繼器里添加3條和之前一樣的數(shù)據(jù)。

選擇動態(tài)面板list，雙擊“拖動結(jié)束時”事件，在后面添加一個“添加行”動作，用來添加數(shù)據(jù)。

三、預(yù)覽效果

一切就緒，按下F5預(yù)覽一下效果。

向下拖動消息列表，然后松開鼠標(biāo)，列表會暫停在標(biāo)題欄下方一定距離處，等待1秒后消息列表回到原處，同時消息列表里增加了3條新的數(shù)據(jù)。

四、小結(jié)

動態(tài)面板和中繼器是原型設(shè)計中兩個重要的元件，特別是動態(tài)面板，基本每個原型都離不開動態(tài)面板的應(yīng)用，需要熟練掌握它的用法。

源文件下載

鏈接: https://pan.baidu.com/s/1dFxj2LF 密碼: 75ee

本文由 @Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載