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

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

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

一、界面布局

1.添加標題欄

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

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

（3）添加個矩形框，大小480*600，放在標題欄下方，作為內容背景。

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

（5）為了響應下拉操作，我們選擇中繼器，右鍵轉換為動態面板，命名為list，調整list大小為480*600，動態面板背景設置為白色，設置動態面板自動顯示垂直滾動條屬性。

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

（7）選擇三個小圓形，右鍵轉換為動態面板，命名為index，然后復制狀態1為狀態2、狀態3。

（8）雙擊動態面板的狀態2，設置第2個圓形為橙色。同理設置動態面板狀態3，設置第3個圓形為橙色。

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

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

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

分別命名為title、author、image。

界面布局部分已經準備完畢。

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

二、事件處理

1.動態面板list的拖動事件

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

添加移動操作，選擇當前元件，設置移動方向為“垂直拖動”。

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

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

2. 動態面板index通過循環顯示3個狀態來顯示加載動畫

將動態面板list向下拖一點，顯示出動態面板index。

（1）選擇動態面板index，添加載入時事件，設置狀態為State2。

這樣設置的目的是觸發它的狀態改變時事件，后面通過狀態改變時事件來設置自動循環顯示3個狀態。

（2）添加狀態改變時事件，設置選擇狀態為”Next“，勾選向后循環，循環間隔為300毫秒。

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

先來修改中繼器的表格數據，修改Column0為title，添加author和image，準備好如下數據（圖片以人人都是產品經理網站上原型帖子的縮略圖為例）：

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

設置標簽分別顯示中繼器的title和author，設置圖片image的default值為Item.image。

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

選擇動態面板list，雙擊“拖動結束時”事件，在后面添加一個“添加行”動作，用來添加數據。

三、預覽效果

一切就緒，按下F5預覽一下效果。

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

四、小結

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

源文件下載

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

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載