移动端上拉加载下拉刷新插件-mescroll.js插件

https://www.cnblogs.com/duanyue/p/8031754.html

 

官网地址是：http://www.mescroll.com

 

 下载mescroll.js插件。

 

  在页面中引入如下两个文件：

 

　　mescroll.min.css

 

　　mescroll.min.js

html部分代码

    <div class="container">
        <div id="mescroll" class="my-address mescroll">
            <div id="addressList" class="address-list">
　　　　　　　　　<!-- 这里是ajax返结果list -->
            </div>
        </div>
    </div>

 需要注意的地方是页面的container必须有固定高度，否则上拉无效。

    var pageNum = 1; //页码
    var size = 10;  //每页数据固定条数
    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            isLock  // 锁定下拉功能
           //callback: upCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback //上拉加载的回调
            ,
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
                warpId:'mescroll', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;
                icon: null, //图标,默认null
                tip: "暂无相关数据~", //提示
                btntext: "", //按钮,默认""
                btnClick: null, //点击按钮的回调,默认null
            },
        }
    });

    //下拉刷新的回调
    function downCallback() {

    }
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        $.ajax({
            url: '/screen/pickUpPoint/findPickUpPointList?current='+pageNum+'&pageSize='+size,
            dataType:'json',
            type:'GET',
            success: function(json) {
                console.log(json)
                var data = json.data;
                var _html = $('#addressListTmpl').render(data);
                $('#addressList').append(_html);
                mescroll.endByPage(data.records.length, data.totalPage);
                pageNum++
            },
            error: function(e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }

大概就是这么个流程，具体详细的还需看官方文档给出的，这里只是做一个简单的效果！