在我們進(jìn)行移動(dòng)應(yīng)用開發(fā)時(shí)，在考慮到用戶體驗(yàn)及功能實(shí)現(xiàn)時(shí)會(huì)用到下拉刷新功能，在APICloud中，我們可以使用pullRefreshLoop模塊來實(shí)現(xiàn)下拉刷新效果，能夠兼容ios和android，能夠較好的實(shí)現(xiàn)下拉刷新效果。

1.在index.html中打開下拉刷新frame

api.openFrame({
    name: 'frm_main',
    url: './html/main.html',
    customRefreshHeader: 'pullRefreshLoop',
    bounces: true,
    rect: {
        x: 0,
        y: document.querySelector( 'header' ).offsetHeight,
        h: api.winHeight - document.querySelector( 'header' ).offsetHeight
    }
});

2.新建下拉刷新頁面

apiready = function() {
        api.setCustomRefreshHeaderInfo({
            bgColor: '#f5f5f5', //（可選項(xiàng)）字符串類型；下拉刷新的背景設(shè)置，支持rgb、rgba、#，該背景大小同當(dāng)前 window 或 frame 的寬高；默認(rèn)：#C0C0C0
            image: { //JSON 對象類型；下拉刷新相關(guān)圖片設(shè)置
                icon: 'widget://image/mx.png', //（可選項(xiàng)）字符串類型；下拉過程中的背景圖片，圖片規(guī)格為正方形，如50*50、100*100，為適配高清屏幕建議開發(fā)者傳大小合適的圖片，若不傳則不顯示
                borderColor: '#d13c2e', //字符串類型；下拉刷新的邊線顏色
            }
        }, function() {
            //下拉刷新被觸發(fā)，自動(dòng)進(jìn)入加載狀態(tài)，使用 api.refreshHeaderLoadDone() 手動(dòng)結(jié)束加載中狀態(tài)
            setTimeout(function() {
                api.refreshHeaderLoadDone()
            }, 3000);
        });
    };

function fnRefreshHeaderLoading() {
   api.refreshHeaderLoading();
};