【APICloud系列|23】 UIPullRefresh 模組（下拉重新整理）的實現

阿新 • • 發佈：2021-01-10

技術標籤：APICloud系列 UIPullRefresh 下拉重新整理 APICloud

導讀：UIPullRefresh 模組對引擎新推出的下拉重新整理介面進行了一層封裝，App 可以通過此模組來實現帶炫酷動畫效果的下拉重新整理功能。

使用了 window + frame 的佈局，如果你只是使用在獨立的 window 佈局，那麼就需要在 config.xml 中配置 <preference name="customRefreshHeader' value="模組名稱'/>。

在 index.html 中使用 openFrame 開啟 main.html，這個地方需要特別注意，此模組與其他模組引入方式不同，是不需要使用 require 去引用的，只需要在開啟 openFrame 時，在其配置中新增 customRefreshHeader 欄位即可，此欄位接收一個字串，因為使用 UIPullRefresh 模組，所以填寫模組名就行。

在 main.html 初始化的 apiready 時使用 setCustomRefreshHeaderInfo 方法初始化好它的 UI( 當然你可以在任何你需要的時候在初始化載入 UI )，該方法接收兩個值，即引數與重新整理完成後的回撥。引數中的 transform 陣列就是下拉過程中的圖組，下拉會有一個固定的最大高度，模組實際就是將這組圖片平均拆分到了各個高度的顯示，所以你的圖越多動畫幀越細，則效果越流暢。load 這個欄位是下拉為載入狀態時的關鍵幀切換的圖片，同上，也是圖越多動畫幀越細則效果越流暢。灰常重要的提醒：所有圖片都要以正方形作為素材，否則會引起變現、失真等情況！官方推薦使用 50 50、100

100 尺寸圖片。
當下拉為重新整理載入狀態時，會觸發 setCustomRefreshHeaderInfo 方法的回撥，這時就需要你去回撥中做你的資料邏輯，最後當你確定資料載入完成，則呼叫 refreshHeaderLoadDone 方法結束載入，我這裡用 3 秒定時器代替資料載入。
很多場景需要程式自動重新整理，所以此模組也提供了 refreshHeaderLoading 方法，具體效果你下載原始碼來試試。

專案結構：

main.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
        <style type="text/css">
            html{ background-color: white; }
            span {
                padding: 10px 15px;
                margin: 10px;
                display: inline-block;
                background-color: #e8e8e8;
            }
            .hover{ opacity: .4; }
        </style>
    </head>
    <body>
    	<article>嘗試手勢下拉頁面或者 "手動開啟載入" </article>
        <span tapmode="hover" onclick="fnRefreshHeaderLoading()">手動開啟載入</span>
    </body>     
</html>
<script type="text/javascript">
    apiready = function(){
        api.setCustomRefreshHeaderInfo({
            bgColor : '#f0f0f0',
            image : {
                pull : 'widget://image/pull.png',
                transform : [
                	'widget://image/pull_end_image_frame_01.png',
                	'widget://image/pull_end_image_frame_02.png',
                	'widget://image/pull_end_image_frame_03.png',
                	'widget://image/pull_end_image_frame_04.png',
                	'widget://image/pull_end_image_frame_05.png'
            	],
                load : [
                	'widget://image/refreshing_image_frame_01.png',
                	'widget://image/refreshing_image_frame_02.png',
                	'widget://image/refreshing_image_frame_03.png',
                	'widget://image/refreshing_image_frame_04.png',
                	'widget://image/refreshing_image_frame_05.png',
                	'widget://image/refreshing_image_frame_06.png'
            	]
            }
        }, function() {
            //下拉重新整理被觸發，自動進入載入狀態，使用 api.refreshHeaderLoadDone() 手動結束載入中狀態
            setTimeout(function(){
				api.refreshHeaderLoadDone()
            }, 3000);
        });
    }
        
    function fnRefreshHeaderLoading() {
        api.refreshHeaderLoading();
    };
</script>

index.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
        <style type="text/css">
            html{ background-color: #06c1ae; }
            header{  padding: 25px 0; }
        </style>
    </head>
    <body>
        <header>
            <h1>下拉載入《阿里巴巴》</h1>
            <mark>
                使用前請詳細閱讀 文件 使用規則
            </mark>
        </header>
    </body>     
</html>
<script type="text/javascript">
    apiready = function(){
        api.openFrame({
            name: 'frm_main',
            url: './html/main.html',
            customRefreshHeader: 'UIPullRefresh',
            bounces: true,
            rect: {
                x: 0,
                y: document.querySelector( 'header' ).offsetHeight,
                h: api.winHeight - document.querySelector( 'header' ).offsetHeight
            }
        });
    };
</script>

config.xml

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
        <style type="text/css">
            html{ background-color: #06c1ae; }
            header{  padding: 25px 0; }
        </style>
    </head>
    <body>
        <header>
            <h1>下拉載入《阿里巴巴》</h1>
            <mark>
                使用前請詳細閱讀 文件 使用規則
            </mark>
        </header>
    </body>     
</html>
<script type="text/javascript">
    apiready = function(){
        api.openFrame({
            name: 'frm_main',
            url: './html/main.html',
            customRefreshHeader: 'UIPullRefresh',
            bounces: true,
            rect: {
                x: 0,
                y: document.querySelector( 'header' ).offsetHeight,
                h: api.winHeight - document.querySelector( 'header' ).offsetHeight
            }
        });
    };
</script>

完整程式碼下載：https://download.csdn.net/download/weixin_41937552/13990743