Axure如何實現下拉重新整理的效果?
思路如下
1、拖動,顯示箭頭朝下的圖示,文字提示“下拉重新整理”;
2、繼續拖動,當拖動高度>=60時,顯示箭頭朝上的圖示,文字提示“釋放重新整理”;
3、限制下拉高度0~120,達到120,無法繼續拖動;
4、釋放拖動,頁面回彈,到60的位置,顯示loading圖示,文字提示“正在重新整理...”
5、為loading圖示配上動畫,2秒後,重新整理結束
6、重新整理結束,頁面回彈到0的位置,展示toast,提示“重新整理成功”。
設定原型稿為375x667的效果
1、往佈局中拖一個控制面板,命名為“操作面板”,該面板寬高375x667,雙擊面板,在面板的State1狀態頁面中,拖2個控制面板,面板1命名為“內容面板”,寬高375x667,起始位置為(0,0),用於存放頁面內容;面板2命名為“重新整理面板”,寬高為375x60,起始位置為(0,-60),當然“重新整理面板”是看不見的;如下圖所示。

2、點選“重新整理面板”,增加3個狀態頁面,分別是“下拉重新整理”,“釋放重新整理”,“正在重新整理”。如名字所示,“重新整理面板”表示了下拉重新整理的3個不同狀態;元件概要如下圖:

“下拉重新整理”狀態頁,包含向下的箭頭,以及文字提示“下拉重新整理”;
“釋放重新整理”狀態頁,包含向上的箭頭,以及文字提示“釋放重新整理”;
“正在重新整理”狀態頁,包含loading圖片,以及文字提示“正在重新整理”;
3、為“操作面板”設定互動事件——“拖動時”,如下圖:

動作1:移動“內容面板”,設定垂直拖動,設定垂直拖動的範圍,頂部y值介於0~120;表示“內容面板”可拖動範圍最大是120;如下圖:

動作2:設定“重新整理面板”的狀態為“下拉重新整理”,如下圖:

動作3:移動“重新整理面板”,設定垂直拖動,設定垂直拖動的邊界,“重新整理面板”底部<=“內容面板”的y值,也就是“重新整理面板”移動範圍,不超過“內容面板”;

點選fx,如下圖:

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

這個條件是幹嘛用的呢?
當下拉移動的距離超過一定範圍的時候,“下拉重新整理"要改為"釋放重新整理"~
這裡我們設定的值為60,當“內容面板”下拉距離>=60的時候,“重新整理面板”的狀態,要修改為“釋放重新整理”
1)增加用例的條件。點選用例編輯頁面中的“編輯條件”,如下圖:

跳轉到“條件編輯”頁面,如下圖:

我們要設定的條件是,“內容面板”的下拉高度<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的顯示與隱藏。