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

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

點(diǎn)擊這里查看在線演示效果。

一、界面布局

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

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

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

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

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

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

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

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

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

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

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

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

分別命名為title、author、image。

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

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

二、事件處理

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

(1)拖動(dòng)時(shí)事件：選擇動(dòng)態(tài)面板list，雙擊“拖動(dòng)時(shí)”事件。

添加移動(dòng)操作，選擇當(dāng)前元件，設(shè)置移動(dòng)方向?yàn)椤按怪蓖蟿?dòng)”。

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

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

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

將動(dòng)態(tài)面板list向下拖一點(diǎn)，顯示出動(dòng)態(tài)面板index。

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

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

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

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

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

添加”每項(xiàng)加載時(shí)“事件處理：

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

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

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

三、預(yù)覽效果

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

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

四、小結(jié)

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

以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你整理的《微信看一看下拉刷新Axure原型設(shè)計(jì)》全部?jī)?nèi)容。如果想要觀看網(wǎng)站建設(shè)案例：化工網(wǎng)站制作設(shè)計(jì)案例，以及其他精彩的官方微博運(yùn)營(yíng)方案可直接點(diǎn)擊查看。