UIPullRefreshFlash 模塊概述:
UIPullRefreshFlash模塊對引擎新推出的下拉刷新接口進行了一層封裝,app能夠經過此模塊來實現帶炫酷動畫效果的下拉刷新功能。使用此模塊,在用戶下拉時本模塊會隨用戶下拉高度而放大縮小下拉出的提示圖標,同時會隨用戶下拉高度播放一組關鍵幀圖片,該圖片數組是經過 api.setCustomRefreshHeaderInfo 接口以圖片數組(參考下文 pull 參數)的形式傳給模塊的,每下拉必定距離(閾值/圖片數量),播放一幀圖片;當下拉高度達到必定閾值後觸發加載事件:進入加載狀態時,刷新提示圖標開始播放加載關鍵幀圖片數組,此時圖片每幀間隔爲 50 毫秒,同時將下拉刷新事件回發給前端。前端獲得下拉刷新事件後開始加載數據;數據加載完畢,調用接口 api.refreshHeaderLoadDone 以中止加載狀態;html
詳見模塊文檔:https://docs.apicloud.com/Cli...前端
使用攻略:
①對於 APICloud 平臺上的普通模塊,在相應接口調用前須要先require該模塊,但因爲本模塊是基於引擎下拉刷新功能擴展的模塊,因此本模塊使用方法比較特殊。能夠沒必要require模塊,改成在 config.xml 文件內配置模塊。
config.xml 文件配置示例以下:
<preference name="customRefreshHeader" value="UIPullRefreshFlash"/>
複製代碼
在 config.xml 配置後,則本模塊爲全局對象,能夠在任意可彈動的窗體(frame、window)中調用 api.setCustomRefreshHeaderInfo 接口設置該下拉刷新樣式,以及開始、中止刷新加載狀態(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。api
②若想在不一樣的 window 或 frame 使用不一樣的下拉刷新模塊,開發者能夠在 window 或 frame 打開時傳入參數 customRefreshHeader:'下拉刷新模的塊名',以指定該窗體的下拉刷新模塊。
{
api.openFrame({數組
name: 'UIPullRefreshFlash-con', url: './UIPullRefreshFlash-con.html', customRefreshHeader: 'UIPullRefreshFlash', bounces: true, rect: { x: offset.l, y: offset.t + offset.h, w: offset.w, h: bodyHeight - offset.h } });
}
複製代碼
UIPullRefreshFlash模塊有三個接口:
setCustomRefreshHeaderInfo:配置下拉刷新樣式;app
refreshHeaderLoading:手動開始下拉刷新的加載狀態,注:下拉刷新狀態亦可經過用戶下拉到閾值自動觸發;動畫
refreshHeaderLoadDone:手動中止下拉刷新的加載狀態;ui
本文出自APICloud官方論壇,感謝論壇版主粉紅頑皮新的分享。url