本文出自APICloud官方論壇,
感謝論壇版主粉紅頑皮新的分享。
UIPullRefreshDrop模塊概述
UIPullRefreshDrop模塊對引擎新推出的下拉刷新接口進行了一層封裝,App 可以通過此模塊來實現水滴效果的下拉刷新功能。使用此模塊,在用戶下拉時本模塊會隨下拉高度而相應地拉伸水滴;當下拉高度達到一定閾值後觸發加載事件:進入加載狀態時,刷新提示圖標開始動畫,同時將下拉刷新事件回發給前端。前端得到下拉刷新事件後開始加載數據;數據加載完畢,調用接口 api.refreshHeaderLoadDone 以停止加載狀態;
模塊文檔鏈接:
https://docs.apicloud.com/Client-API/UI-Layout/UIPullRefreshDrop
注意:對於 APICloud 平臺上的普通模塊,在相應接口調用前需要先 require 該模塊,但由於本模塊是基於引擎下拉刷新功能擴展的模塊,所以本模塊使用方法比較特殊。可以不必 require 模塊,改爲在 config.xml 文件內配置模塊。
config.xml 文件配置示例如下:
<preference name="customRefreshHeader" value="UIPullRefreshDrop"/>
複製代碼
在 config.xml 配置後,則本模塊爲全局對象,可以在任意可彈動的窗體(frame、window)中調用 api.setCustomRefreshHeaderInfo 接口設置該下拉刷新樣式,以及開始、停止刷新加載狀態(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。
UIPullRefreshDrop模塊有三個接口:
setCustomRefreshHeaderInfo
配置下拉刷新樣式
refreshHeaderLoading
手動開始下拉刷新的加載狀態,下拉刷新狀態亦可通過用戶手勢下拉到閾值自動觸發
refreshHeaderLoadDone
手動停止下拉刷新的加載狀態
下面是模塊運行效果圖: