1. 下载并引用 mescroll.min.css , mescroll.min.js

2. 拷贝以下布局结构 :

<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删

    //列表内容,如:<ul>列表数据</ul> ...

</div>

3. 创建mescroll对象 :

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id

    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例

    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback

    down: {

        callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了

    },

    up: {

        callback: upCallback //上拉加载的回调

    }

}); 

4. 处理回调 :

//下拉刷新的回调

function downCallback() {

    $.ajax({

        url: 'xxxxxx',

        success: function(data) {

            //联网成功的回调,隐藏下拉刷新的状态;

            mescroll.endSuccess(); //无参

            //设置数据

            //setXxxx(data);//自行实现 TODO

        },

        error: function(data) {

            //联网失败的回调,隐藏下拉刷新的状态

            mescroll.endErr();

        }

    });

}

//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10

function upCallback(page) {

    $.ajax({

        url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?

        success: function(data) {

            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;

            //参数data.length:当前页的数据总数

            //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;

            //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

            //如果你需要强制显示无更多数据,则mescroll.endSuccess(0),注意noMoreSize的配置

            //如果不传data.length,则仅隐藏下拉刷新的状态

            mescroll.endSuccess(data.length);

            //设置列表数据

            //setListData(data);//自行实现 TODO

        },

        error: function(e) {

            //联网失败的回调,隐藏下拉刷新和上拉加载的状态

            mescroll.endErr();

        }

    });

}