用mescroll实现无限上拉增加数据，下拉刷新数据 (学习笔记)

最近自己做一个web app需要用到上拉查询下页数据，网上看了很多很多帖子，发现并不能快速的套用，总是会出现各种问题无法使用，于是无奈自己跑去看了官方api文档，终于做了出来，至此做个笔记，以后用到可以直接复制粘贴套用，好了不废话了，进入正题。

1.需要引用 mescroll.min.css , mescroll.min.js

这两个文件可以去http://www.mescroll.com/load.html下载，

也可以选择引用cdn：

// jsdelivr的CDN:
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.css">
        <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.js" charset="utf-8"></script>

2.添加以下布局(容纳操作内容的容器)

　　<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
        <div> //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)
                    //内容...
        </div>
    </div>

3.在head中添加style固定mescroll的div高度. 推荐通过定位的方式,简单快捷: (点此查看其他方法)

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

4. 创建mescroll对象(我是单独建了一个js文件) :

    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
     down: {
         auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback, //下拉刷新的回调
     },
     up: {
         auto:true,//初始化完毕,是否自动触发上拉加载的回调
            isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: upCallback, //上拉加载的回调
            /*toTop:{ //配置回到顶部按钮
                src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }*/
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            }
     }
});

5. 处理回调 :

 //下拉刷新的回调
    function downCallback() {
         $.ajax({
             url: '',
             success: function(data) {
                 //联网成功的回调,隐藏下拉刷新的状态;
                 mescroll.endSuccess(); //无参
                 //设置数据
                 //setXxxx(data);//自行实现 TODO
             },
             error: function(data) {
                 //联网失败的回调,隐藏下拉刷新的状态
                 mescroll.endErr();
             }
         });
    }
    //上拉加载的回调 page = {num:1, size:5};（这里size我在上面设置成5了，默认是10） num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
   /*     var pageIndex = page.num-1;*/ //若想从num=0开始，就把前面的注释打开。
        $.ajax({
            url: 'xxxxxxxx' + '?' + 'pageNum=' + page.num + '&pageSize=' + page.size,
            dataType:'json',
            type:'GET',
            success: function(curPageData) {
 　　　　　　　　　　//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
　　　　　　　　　　//必传参数(当前页的数据个数, 总数据量)             
　　　　　　　　　　mescroll.endBySize(curPageData.shopList.length, curPageData.count);

　　　　　　　　　　　//这里面还有一堆方法，根据自己后端情况选择
　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
					//列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//必传参数(当前页的数据个数, 总页数)
					//mescroll.endByPage(curPageData.length, totalPage);

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//必传参数(当前页的数据个数, 总数据量)
					//mescroll.endBySize(curPageData.length, totalSize);

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//必传参数(当前页的数据个数, 是否有下一页true/false)
					//mescroll.endSuccess(curPageData.length, hasNext);

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
					//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					//如果传了hasNext,则翻到第二页即可显示无更多数据.
					//mescroll.endSuccess(curPageData.length);

					//结束下拉刷新的 mescroll.endSuccess()无参.
					//结束上拉加载 curPageData.length必传的原因:
						1.使配置的noMoreSize生效
						2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
						  比传入的totalPage, totalSize, hasNext具有更高的判断优先级
						3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
						  传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题

　　　　　　　　　　　　　

                　　//设置列表数据,自行实现，里面写你遍历像前台塞值过程
                　　setListData(curPageData);
},
            error: function(e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }

    //具体实现自行定义
    function setListData(curPageData){
        var html = '';
        //这里，我后台返回的是个map集合，所以遍历店铺列表，拼接出卡片集合，具体自行定义
        curPageData.shopList.map(function(item, index) {
            html += '' + '<div class="withdrawals-panel card" data-shop-id="'
                    + item.shopId + '">'
                    + '<div class="groupby-img-panle "><a href="#"><img src="'
                    + item.shopImg + '" class="am-img-responsive" /></a></div>'
                    + '<div class="groupby-info-panle">'
                    + '<h3>' + item.shopName + '</h3>'
                    + '<p>' + item.shopDesc + '</p>'
                    + '<p>' + new Date(item.lastEditTime).Format("yyyy-MM-dd") + '</p>'
                    + '</div>'
                    + '</div>';
        });
        $('.list-div').append(html);
    }

至此功能已经实现，以此笔记 记录使用过程。