mui上拉加载功能实例详解

<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>

<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>

<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>

 //加载更多
 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);
}
})();