思路如下
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的顯示與隱藏。