中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

如何利用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：移動“刷新面板”，設置垂直拖動，設置垂直拖動的邊界，“刷新面板”底部<=“內容面板”的y值，也就是“刷新面板”移動范圍，不超過“內容面板”。

點擊fx，如下圖：

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

這個條件是干嘛用的呢？

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

這里我們設置的值為60，當“內容面板”下拉距離>=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協議