如何利用Axure去實現(xiàn)下拉刷新的效果？一起來文中看看~

思路如下：

1. 拖動頁面，顯示箭頭朝下的圖標，文字提示“下拉刷新”；
2. 繼續(xù)拖動，當拖動高度>=60時，顯示箭頭朝上的圖標，文字提示“釋放刷新”；
3. 限制下拉高度0~120，達到120，無法繼續(xù)拖動；
4. 釋放拖動，頁面回彈，到60的位置，顯示loading圖標，文字提示“正在刷新…”；
5. 為loading圖標配上動畫，2秒后，刷新結(jié)束；
6. 刷新結(jié)束，頁面回彈到0的位置，展示toast，提示“刷新成功”。

原型稿為375×667的效果：

（1）往布局中拖一個控制面板，命名為“操作面板”，該面板寬高375×667，雙擊面板，在面板的State1狀態(tài)頁面中，拖2個控制面板。

• 面板1命名為“內(nèi)容面板”，寬高375×667，起始位置為（0，0），用于存放頁面內(nèi)容；
• 面板2命名為“刷新面板”，寬高為375×60，起始位置為（0，-60），當然“刷新面板”是看不見的。

如下圖所示：

（2）點擊“刷新面板”，增加3個狀態(tài)頁面，分別是“下拉刷新”，“釋放刷新”，“正在刷新”。如名字所示，“刷新面板”表示了下拉刷新的3個不同狀態(tài)。

組件概要如下圖：

1. “下拉刷新”狀態(tài)頁，包含向下的箭頭，以及文字提示“下拉刷新”；
2. “釋放刷新”狀態(tài)頁，包含向上的箭頭，以及文字提示“釋放刷新”；
3. “正在刷新”狀態(tài)頁，包含loading圖片，以及文字提示“正在刷新”。

（3）為“操作面板”設(shè)置交互事件——“拖動時”，如下圖：

動作1：移動“內(nèi)容面板”，設(shè)置垂直拖動，設(shè)置垂直拖動的范圍，頂部y值介于0~120；表示“內(nèi)容面板”可拖動范圍最大是120。

如下圖：

動作2：設(shè)置“刷新面板”的狀態(tài)為“下拉刷新”，如下圖：

動作3：移動“刷新面板”，設(shè)置垂直拖動，設(shè)置垂直拖動的邊界，“刷新面板”底部<=“內(nèi)容面板”的y值，也就是“刷新面板”移動范圍，不超過“內(nèi)容面板”。

點擊fx，如下圖：

以上3個動作，算是完成了一個下拉的操作；你一定發(fā)現(xiàn)了，用例當中增加了2個判斷條件，如下圖：

這個條件是干嘛用的呢？

當下拉移動的距離超過一定范圍的時候，“下拉刷新”要改為”釋放刷新”~

這里我們設(shè)置的值為60，當“內(nèi)容面板”下拉距離>=60的時候，“刷新面板”的狀態(tài)，要修改為“釋放刷新”。

增加用例的條件。點擊用例編輯頁面中的“編輯條件”，如下圖：

跳轉(zhuǎn)到“條件編輯”頁面，如下圖：

我們要設(shè)置的條件是，“內(nèi)容面板”的下拉高度<60。

“內(nèi)容面板”的高度如何獲取呢？

點擊fx，設(shè)置“內(nèi)容面板”的下拉高度，如下圖：

創(chuàng)建一個局部變量“content”=元件“內(nèi)容面板”；content.top表示“內(nèi)容面板”頂部的y值，即“內(nèi)容面板”拖動的高度。

以上條件加完了，但是還沒結(jié)束，以上步驟僅表示下拉刷新過程中，鼠標（表示移動端觸摸事件）未釋放之前的操作，還需要繼續(xù)。

（3）為“操作面板”設(shè)置設(shè)置交互事件——“拖動結(jié)束時”，如下圖：

• 動作1：移動“內(nèi)容面板”到(0，60)的位置，這個位置剛好60的高度，可以展示“刷新面板”的刷新提示信息；這個移動動作，表示下拉到120位置后的面板回彈效果；配合動畫食用更佳；
• 動作2：移動“刷新面板”到（0，0）位置，并設(shè)置邊界；表示刷新狀態(tài)的回彈效果；
• 動作3：設(shè)置“刷新面板”的狀態(tài)，修改為“正在刷新”；面板回彈前狀態(tài)是“釋放刷新”，此時我們已經(jīng)釋放鼠標（觸摸效果），處于loading狀態(tài)了。
• 動作4：設(shè)置“刷新面板”中l(wèi)oading圖標的旋轉(zhuǎn)效果，這個不用多解釋了，就是讓loading效果轉(zhuǎn)起來~
• 動作5：設(shè)置等待時間，讓loading效果持續(xù)一段時間；
• 動作6：移動“內(nèi)容面板”到（0，0）位置。表示刷新結(jié)束，功成身退，回到最初的起點。
• 動作7：移動“刷新面板”到（0，Target.height）。同6；
• 動作8：設(shè)置“刷新面板”的狀態(tài)為“下拉刷新”，面板狀態(tài)復(fù)位，回到最初的狀態(tài)；
• 動作9-12：設(shè)置刷新結(jié)束的Toast的顯示與隱藏。

以上~

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

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