最近在做移動端的項目，用到了mui的上拉加載，整理如下：

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" ><script src="js/jquery-3.2.0.min.js"></script><script src="common/mui/js/mui.min.js"></script>

2、靜態頁的dom結構

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon"><div class="mui-scroll"><div class="mui-table-view mui-table-view-chevron"></div></div></div>

3、靜態頁面 js對應的代碼

<script type="text/javascript">(function(){//上拉加載下拉刷新mui.init({　　pullRefresh: {　　container: '#pullrefresh',　　up: {　　　　contentrefresh: '正在加載...',　　　　callback: pullupRefresh　　　　}　　}});//加載更多var dataNum=12;//獲取數據總數var pageSize=3;//每頁顯示條數var counter=1;//計數器var pageStart=0;//開始數據條數getData(pageStart,pageSize);function getData(pageStart,pageSize){//顯示數不足每頁顯示條數if(dataNum-pageStart<pageSize){pageSize=dataNum-pageStart;data(pageStart,pageSize);console.log("顯示數不足每頁顯示條數");}//顯示隱藏加載更多else if(pageStart+pageSize>=dataNum){data(pageStart,pageSize);console.log("沒有更多數據了");//沒有更多數據了}else{data(pageStart,pageSize);console.log("顯示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);//顯示}}function data(pageStart,pageSize){//業務var result="";for(var i=pageStart;i<(pageStart+pageSize);i++){result+='<div class="goode-msg">'+'<div class="goods">'+'<p class="goode-name">嗚嗚嗚嗚</p>'+'<span class="goods-price">價格：10元</span>'+'<span class="icon-golden"></span>'+'<span class="goods-golden">送1111</span>'+'</div>'+'<div class="buycon">'+'<a class="buybtn buybtnabled" onclick="shop(5)">立即購買</a>'+'</div>'+'</div>'}console.log(jQuery);jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');}/*** 上拉加載具體業務實現*/function pullupRefresh() {setTimeout(function() {var flag=counter++<(dataNum/pageSize)console.log(dataNum/pageSize);mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //參數為true代表沒有更多數據了。var scroll = document.body.querySelector('.mui-scroll .mui-table-view');var item = document.body.querySelectorAll('.goode-msg');console.log(counter);if(flag){console.log(counter);pageStart=counter*pageSize;data(pageStart,pageSize);}}, 1500);}})();</script>

4、與服務端聯調時 js做了改動，如下：

 //加載更多 var pageSize = 15;//每頁顯示條數 var counter = 1;//計數器 var pageStart = 0;//開始數據條數 var Flag=true; data(); function data() {  //業務  var result = "";  $.ajax({   type: 'post',   url: '/xxx/xxx',   async: false,   dataType: "json",   data: {page: counter},   success: function (data) {    Flag=data[0].dd==null||data[0].dd==undefined||data[0].dd=='';//判斷是否有返回值 當沒有返回值的時候就為空，則代表沒有更多數據了    console.log(Flag);    if(Flag==false){     counter++;    }    $.each(data[0].dd, function (i, value) {     result += '<div class="goode-msg">' +       '<div class="goods">' +       '<input type="hidden" class="id" value="'+value.id+'">' +       '<input type="hidden" class="aa" value="'+value.aa+'">' +       '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' +       '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' +       '<span class="goods-price">價格：<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' +       '<span class="icon-golden"></span>' +       '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' +       '</div>' +       '<div class="buycon">' +       '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即購買</a>' +       '</div>' +       '</div>'    });    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');   }  } );}/** * 上拉加載具體業務實現 */function pullupRefresh() { setTimeout(function () {  mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //參數為true代表沒有更多數據了。  data(); }, 1500);}})();