一、資料參考

二、實現步驟

1.HTML內容

（最好按照這個結構來佈置，當然 id的位置可以稍微根據實際需要來調整）

<!--下拉重新整理容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--資料列表-->
    <ul class="mui-table-view mui-table-view-chevron">
    </ul>
  </div
 
>
</div>

2.通過mui.init方法中pullRefresh引數配置各項引數

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {//下拉重新整理
            auto:true,//可選,預設false.自動下拉重新整理一次
            contentdown : "下拉可以重新整理",//可選，在下拉可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
            contentover : "釋放立即重新整理",//可選，在釋放可重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
 

            contentrefresh : "正在重新整理...",//可選，正在重新整理狀態時，下拉重新整理控制元件上顯示的標題內容
            callback: pulldownRefresh
        },
        up: {//上拉載入
            //auto:true,//可選,預設false.自動上拉載入一次
            contentrefresh: '正在載入...',
            contentnomore:'沒有更多資料了',//可選，請求完畢若沒有更多資料時顯示的提醒內容；
            callback: pullupRefresh
        }
    }
});
 

3.下拉重新整理具體業務實現

function pulldownRefresh() {
    setTimeout(function() {
        count = 1;//重新整理並顯示第一頁
        data={
            //...,
            page:count
        };
        type=1;//代表下拉重新整理
        toList(data,type);//具體取資料的方法
    }, 100);
}

4.上拉載入具體業務實現

function pullupRefresh() {
    setTimeout(function() {
        count++;//翻下一頁
        data={
            //...,
            page:count
        };
        type=2;//代表上拉載入
        toList(data,type);//具體取資料的方法
    }, 100);
}

5.自動下拉重新整理

此處只提供一種方法，因為在init引數配置中，auto:true,也能實現同樣的效果，目前還不知道兩者的區別。

if(mui.os.plus) {
    mui.plusReady(function() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().pulldownLoading();
        }, 1000);
    });
} else {
    mui.ready(function() {
        mui('#pullrefresh').pullRefresh().pulldownLoading();
    });
}

6.到介面取資料

此處提供的是ajax方法。同時處理”上拉顯示更多”以及“沒有更多資料”的翻頁切換。

var vm = new Vue({//此處採用vue.js
    el: '#pullrefresh',
    data: {
        companylist: null,
    },
    created: function() {
    },
    methods: {
    }
});
var toLsit = function(data,type) {
    plus.nativeUI.showWaiting("等待中....",{padlock: true});//資料出來前顯示等待載入框
    mui.ajax(url, {
        data:data,
        dataType: 'json',
        type: 'POST',
        timeout: 10000,
        success: function(data) {
            for (var i in data.company_list) {
                 var arr = new Array();
                 for (var item in data.company_list[i]) {
                     arr[item] = data.company_list[i][item];
                 }
                 if(type==1){//上拉重新整理
                      /*下面這句很關鍵！*/
                      mui('#pullrefresh').pullRefresh().refresh(true);//有重新觸發上拉載入的需求（比如當前類別已無更多資料，但切換到另外一個類別後，應支援繼續上拉載入）
                      vm.companylist = data.company_list;
                      plus.nativeUI.closeWaiting();//資料渲染完畢，關閉載入框
                      mui.currentWebview.show(); //顯示當前頁面           
                 }
                  if(type==2){//下拉載入
                      vm.companylist.push(arr);
                      plus.nativeUI.closeWaiting();//資料渲染完畢，關閉載入框
                      mui.currentWebview.show(); //顯示當前頁面
                 }
             }

             mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//結束下拉重新整理
             /*結束上拉載入，並根據情況切換“下拉顯示更多資料”，以及“沒有更多資料了”。執行endPullupToRefresh()方法，結束轉雪花進度條的“正在載入...”過程,若還有更多資料，則傳入false; 否則傳入true，之後滾動條滾動到底時*/
             if(data.status == 1){
                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
             } else {
                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
             }
            plus.nativeUI.closeWaiting();
            mui.currentWebview.show(); //顯示當前頁面
            if(data.status!=1&&count==1){
                alert(data.errormessage);
                plus.nativeUI.closeWaiting();
                mui.currentWebview.show(); //顯示當前頁面
            }
        },
        error: function(xhr, type, errerThrown) {
            mui.toast('網路異常,請稍候再試');
            plus.nativeUI.closeWaiting();  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }
    });
};