Axure：如何實現下拉刷新的效果？

從零開始學運營，10年經驗運營總監親授，2天線下集訓+1年在線學習，做個有競爭力的運營人。 了解詳情

如何利用Axure去​​實現下拉刷新的效果？ 一起來文中看看~

思路如下：

1. 拖動頁面，顯示箭頭朝下的圖標，文字提示“下拉刷新”；


2. 繼續拖動，當拖動高度>=60時，顯示箭頭朝上的圖標，文字提示“釋放刷新”；


3. 限制下拉高度0~120，達到120，無法繼續拖動；


4. 釋放拖動，頁面回彈，到60的位置，顯示loading圖標，文字提示“正在刷新…”；


5. 為loading圖標配上動畫，2秒後，刷新結束；


6. 刷新結束，頁面回彈到0的位置，展示toast，提示“刷新成功”。

原型稿為375×667的效果：

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

• 面板1命名為“內容面板”，寬高375×667，起始位置為（0，0），用於存放頁面內容；


• 面板2命名為“刷新面板”，寬高為375×60，起始位置為（0，-60），當然“刷新面板”是看不見的。

如下圖所示：

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

組件概要如下圖：

 

1. “下拉刷新”狀態頁，包含向下的箭頭，以及文字提示“下拉刷新”；


2. “釋放刷新”狀態頁，包含向上的箭頭，以及文字提示“釋放刷新”；


3. “正在刷新”狀態頁，包含loading圖片，以及文字提示“正在刷新”。

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

動作1：移動“內容面板”，設置垂直拖動，設置垂直拖動的範圍，頂部y值介於0~120；表示“內容面板”可拖動範圍最大是120。

如下圖：

動作2：設置“刷新面板”的狀態為“下拉刷新”，如下圖：

動作3：移動“刷新面板”，設置垂直拖動，設置垂直拖動的邊界，“刷新面板”底部

點擊fx，如下圖：

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

這個條件是乾嘛用的呢？

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

這裡我們設置的值為60，當“內容面板”下拉距離>=60的時候，“刷新面板”的狀態，要修改為“釋放刷新”。

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

跳轉到“條件編輯”頁面，如下圖：

我們要設置的條件是，“內容面板”的下拉高度

“內容面板”的高度如何獲取呢？

點擊fx，設置“內容面板”的下拉高度，如下圖：

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

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

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

• 動作1：移動“內容面板”到(0，60)的位置，這個位置剛好60的高度，可以展示“刷新面板”的刷新提示信息；這個移動動作，表示下拉到120位置後的面板回彈效果 ；配合動畫食用更佳；


• 動作2：移動“刷新面板”到（0，0）位置，並設置邊界；表示刷新狀態的回彈效果；


• 動作3：設置“刷新面板”的狀態，修改為“正在刷新”；面板回彈前狀態是“釋放刷新”，此時我們已經釋放鼠標（觸摸效果），處於loading狀態了。


• 動作4：設置“刷新面板”中loading圖標的旋轉效果，這個不用多解釋了，就是讓loading效果轉起來~


• 動作5：設置等待時間，讓loading效果持續一段時間；


• 動作6：移動“內容面板”到（0，0）位置。 表示刷新結束，功成身退，回到最初的起點。


• 動作7：移動“刷新面板”到（0，Target.height）。 同6；


• 動作8：設置“刷新面板”的狀態為“下拉刷新”，面板狀態復位，回到最初的狀態；


• 動作9-12：設置刷新結束的Toast的顯示與隱藏。

以上~

 

本文由 @天下小雨 原創發佈於人人都是產品經理。 未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

http://www.kubonews.com/2018111737411.html

每日即時更新新聞，請上：http://www.kubonews.com