mescroll上拉加载的实现

html部分

   

       
           
           
   

css部分

.mescroll{
        position: fixed;
        top: 103px;
        left: 0;
        bottom: 0;
        height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
    }

js 部分

var mescroll = new MeScroll("mescroll", {

                up: {
                    callback: upCallback, //上拉加载的回调
                    isBounce: false,
                    //以下是一些常用的配置,当然不写也可以的.
                    page: {
                        num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                        size: 2 //每页数据条数,默认10
                    },
                    htmlNodata: '

-- END --

',
                    noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                            // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                            // 这就是为什么无更多数据有时候不显示的原因.
                    toTop: {
                        //回到顶部按钮
                        src: "./images/mescroll-totop.png", //图片路径,默认null,支持网络图
                        offset: 1000 //列表滚动1000px才显示回到顶部按钮  
                    }
                }
            });

        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
            function upCallback(page){
                //联网加载数据
                getListDataFromNet(page.num, page.size, function(curPageData){
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                    console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
                    
                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
                    
                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
                    
                    //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                    //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
                    
                    //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                    // mescroll.endSuccess(curPageData.length);
                    
                    //提示:curPageData.length必传的原因:
                    // 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                    // 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                    // 3.使配置的noMoreSize生效
                    
                    //设置列表数据
                    // setListData(curPageData, true);
                }, function(){
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr();
                });
            }
            
            /*设置列表数据*/
            function setListData(curPageData, isAppend) {
                console.log(curPageData);
                var listDom=document.getElementById("newsList");
                for (var i = 0; i < curPageData.length; i++) {
                    var newObj=curPageData[i];
                    
                    var str='';
                    str+='

';
                    str+='

充值时间

';
                    str+='

'+newObj.starttime+'

';
                    str+='

';
                    str+='

';
                    str+='

充值卡号

';
                    str+='

'+newObj.device_id+'

';
                    str+='

';
                    // str+='

';
                    // str+='

微信充值

';
                    // str+='

2017-12-22

';
                    // str+='

';
                    str+='

';
                    str+='

充值金额

';
                    str+='

'+newObj.order_money+'

';
                    str+='

';
                    var liDom=document.createElement("li");
                    liDom.innerHTML=str;
                    
                    if (isAppend) {
                        listDom.appendChild(liDom);//加在列表的后面,上拉加载
                    }
                }
            }
            // 获取url参数
            function GetRequest() {  
               var url = location.search; //获取url中"?"符后的字串  
               var theRequest = new Object();  
               if (url.indexOf("?") != -1) {  
                  var str = url.substr(1);  
                  strs = str.split("&");  
                  for(var i = 0; i < strs.length; i ++) {  
                     theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
                  }  
               }  
               return theRequest;  
            }
            /*联网加载列表数据
             在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
             请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
             实际项目以您服务器接口返回的数据为准,无需本地处理分页.
             * */
            var downIndex=0;
            function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
                var flag = true
                //延时一秒,模拟联网
                setTimeout(function () {
                    var url="http://www.shawy.cn/Mobile/Userapi/buy_order_list";
                    var ka_code = GetRequest().device_id;
                    // console.log(ka_code)
                    try{
                        var newArr=[];
                            if(flag == true){
                                $.ajax({
                                    url: url+'?page=' + pageNum + "&page_size=" + pageSize + '&device_id='+ ka_code, //如何修改page.num从0开始 ?
                                    success: function(curPageData) {
                                        var curPageData = JSON.parse(curPageData);
                                        // pageSize = curPageData.length;
                                        // console.log(curPageData);
                                        //此处模拟上拉加载返回的数据
                                        // for (var i = 0; i < curPageData.length; i++) {
                                        //     var newObj=curPageData[i];
                                            
                                        //     if(i==curPageData.length) break;
                                        //        newArr.push(newObj);
                                        //     }
                                        // }
                                        for (var i = 0; i < pageSize; i++) {
                                            if(curPageData.length                                                 flag = false;
                                            }
                                            var newObj=curPageData[i];
                                            newArr.push(newObj);
                                        }
                                        mescroll.endSuccess(curPageData.length);
                                        setListData(curPageData, true);
                                        
                                        //联网成功的回调
                                        successCallback&&successCallback(newArr);
                                    }
                                })
                            }
                    }catch(e){
                        //联网失败的回调
                        errorCallback&&errorCallback();
                    }
                },1000)
            }