mescroll.js实现下拉刷新，上拉加载！！

一：下载并引用

<link rel="stylesheet" href="assets/css/mescroll.min.css">

<script type="text/javascript" src="assets/js/mescroll.min.js"></script>
<script type="text/javascript" src="assets/js/mescroll.m.js"></script>

二：html部分：

                <div id="mescroll" class="mescroll">
<ul id="newsList" class="news-list">
<li>


</li>
</ul>
</div>

备注：id="mescroll"可以更换但是class="mescroll"不能更换

三：js部分：

1：  进入页面前，后台初始化页码、条数，获取总数据量  

                  <script type="text/javascript">  
// 把后台获取的当前页码赋值给pageNo  
var pageNo = "${pageNo}";  
// 把后台获取的每页数据量赋值
var pageSize = "${pageSize}";  
// 把后台获取的总数据量赋值
var totalCount = "${totalCount}";  
  
//通过ajax异步获取数据并赋值给一个变量并return，供后面的getListDataFromNet函数用
function loadMoreNew(){  
    var newArr = [];  
    // 请求后台获取分页数据  
    $.ajax({  
        type : "POST",  
        url : ".....",  
        dataType : "json",  
        contentType : "application/json; charset=utf-8",  
        async : false,  
        success : function(data) {  
            var code = data.code;  
            // 得到数据集  
            var o = data.obj;  
            var html = "";  
            // 遍历数据集，放入数组中  
            for (var i = 0; i < merchants.length; i++) {  
                var def = o[i];  
                html = ".....";  
                newArr.push(html);  
            }  
            // 页码+1  
            pageNo = pageNo + 1;  
        },  
        error : function(xhr, status) {  
        }  
    });  
    // 返回数据  
    return newArr;  
}  
</script>  

2：书写mescroll部分：

<script type="text/javascript" charset="utf-8">

                //创建MeScroll对象

                $(function(){
var mescroll = initMeScroll("mescroll", {
down:{
auto:true,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
callback: downCallback, //下拉刷新的回调
},
up: {
auto:true,//初始化完毕,是否自动触发上拉加载的回调
isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
callback: upCallback, //上拉加载的回调
toTop:{ //配置回到顶部按钮
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}
}
});

                      /*下拉刷新的回调 */
function downCallback(){
//加载轮播数据..
//...
//加载列表数据
getListDataFromNet(0, 1, function(data){
//联网成功的回调,隐藏下拉刷新的状态
mescroll.endSuccess();
//设置列表数据
setListData(data, false);
//显示提示
$("#downloadTip").css("top","44px");
setTimeout(function () {
$("#downloadTip").css("top","20px");
},2000);
}, function(){
//联网失败的回调,隐藏下拉刷新的状态
                mescroll.endErr();
});
}

                 /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */  
        var page = {num : pageNo, size : pageSize};  
        function upCallback(page){  
            //联网加载数据  
            getListDataFromNet(page.num, page.size, function(data){  
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;  
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;  
                console.log("page.num="+page.num+", page.size="+page.size+", data.length="+data.length + ", totalCount" + totalCount); 
                  
                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize  
                mescroll.endBySize(data.length, totalCount); //必传参数(当前页的数据个数, 总数据量)  
                  
                //设置列表数据  
                setListData(data, true);  
            }, function(){  
                //联网失败的回调,隐藏上拉加载的状态  
                mescroll.endErr();  
            });  
        }  

                /*设置列表数据*/  
        function setListData(data, isAppend) {  
            for (var i = 0; i < data.length; i++) {  
                var newObj = data[i];  
                $("#listDiv").append(newObj);  
            }  
        }  

               /*联网加载列表数据*/  
        var downIndex=0;  
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {  
            //延时一秒,模拟联网  
               setTimeout(function () {  
                try{  
                    var newArr = [];  
                    newArr = loadMoreNew();  
                    successCallback&&successCallback(newArr);  
                }catch(e){  
                    //联网失败的回调  
                    errorCallback&&errorCallback();  
                }  
               },2000)  
        }  
          
        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码  
        document.ondragstart=function() {return false;}  
    });  
</script>  

OK到此，整个过程结束