mescroll上拉刷新插件的应用实例

##插件链接http://www.mescroll.com/api.html?v=66

 //创建MeScroll对象
        var mescroll = new MeScroll("mescroll", {

            up: {
                page:{
                  num:0,//当前页
                  size:10//每页数据条数
                },
                auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                toTop:{ //配置回到顶部按钮
                    src : "${ctx}/image/mobile/groupbuy/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    //offset : 1000
                }
            }
        });



        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function upCallback(page){
            curPage=page.num;
            //联网加载数据
            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) {
            var listDom=document.getElementById("newsList");
            for (var i = 0; i < curPageData.ordOrders.length; i++) {
                var newObj=curPageData.ordOrders[i];

                var str='';
                str+="<a href='details.html'>\n"+
                    "<div class='group_list_time'>\n"

                 +"   <div class='group_time clearfix' id='pd_time"+((curPage-1)*10+i+1)+"' beginDate='"+newObj.groupbuyBuybegindate+"' endDate='"+newObj.groupbuySellenddate+"'>\n"
                /*+"  <p>团购结束倒计时</p>\n"*/
                +'</div>'
                +'</div>';
                if(newObj.categoryid==null){
                    str+='<img src="${ctx }/image/crowdfunding/suger/suger-middle-67.jpg" alt="">';
                }else{
                    str+='<img src="${ctx }/image/crowdfunding/suger/suger-middle-'+newObj.categoryid+'.jpg" alt="">';
                }
                str+='    <div class="group_txt">'
                +'    <h2>'+newObj.content+'</h2>'
                +'<p>团购品类：  <b>糖类</b></p>'
                +'</div>\n'
                +'</a>';
                var liDom=document.createElement("li");
                liDom.innerHTML=str;

                if (isAppend) {
                    listDom.appendChild(liDom);//加在列表的后面,上拉加载
                } else{
                    listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
                }
            }
        }

        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        var downIndex=0;
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            //延时一秒,模拟联网
            setTimeout(function () {
                try{
                    var param = {};
                    param.currentPage = pageNum;
                    param.pageSize = pageSize;
                    $.ajax({
                        url:"${ctx}/api/groupbuy/pageGroupbuyIndex",
                        type:'post',
                        data:param,
                        success:function(result){
                            if(result.code=='success'){
                                successCallback(result.data);
                            }
                        },
                        error:errorCallback
                    })

                }catch(e){
                    //联网失败的回调
                    errorCallback&&errorCallback();
                }
            },100)//100毫秒后再请求，上拉刷新页面时数据未出来时有"加载中。。。"的效果
        }

    });