mescroll 实现下拉刷新，上拉加载_mescroll-uni插件自定义下拉的loading动画-CSDN博客

本文链接：https://blog.csdn.net/Zheng_xiao_xin/article/details/82853815
mescroll 实现下拉刷新，上拉加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <script type="text/javascript" src="js/mescroll.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/mescroll.css"></link>
</head>
<style type="text/css">

    /*说明*/
    .mescroll .notice{
        font-size: 14px;
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        text-align: center;
        color:#555;
    }
    /*列表*/
    .mescroll{
        position: fixed;
        top: 0px;
        bottom: 0;
        height: auto;
    }
    .element::-webkit-scrollbar {display:none}
</style>
</head>

<body>
<!--滑动区域-->
<div id="mescroll" class="mescroll element">
    <p class="notice">下拉刷新显示一个页数据，上拉加载分页数据</p>
    <div id="newsList" class="news-list">

    </div>
</div>
</body>

<script type="text/javascript" charset="utf-8">
    $(function(){
        //创建MeScroll对象
        var mescroll = new MeScroll("mescroll", {
            down: {
                auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            },
            up: {
                page:{size:2},//每页显示几条，默认为10
                auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                clearEmptyId: "newsList",//1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
                autoShowLoading: true,//显示加载进度
                noMoreSize: 1,//如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                lazyLoad: {
                    use: true // 是否开启懒加载,默认false
                },
                toTop:{ //配置回到顶部按钮
                    src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    offset : 100
                },
                loadFull: {
                    use: true, //列表数据过少,是否自动加载下一页,直到满屏或者无更多数据为止;默认false
                    delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
                },
                empty: {
                    //列表第一页无任何数据时,显示的空提示布局;
                    tip: "根本没有数据好吧！！", //提示
                },

            }
        });

        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function upCallback(page){
            var num = page.num -1;
            getListDataFromNet(num, page.size, function(curPageData){
                console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
                mescroll.endSuccess(curPageData.length,3);
                setListData(curPageData);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr();
            });
        }

        /*设置列表数据*/
        function setListData(curPageData) {
            var listDom=$("#newsList");
            for (var i = 0; i < curPageData.length; i++) {
                var newObj=curPageData[i];
                var str = '<span class="new-content">'+newObj.name+'--'+newObj.age+'</span><br/><br/><br/><br/><br/>';
                listDom.append(str);//加在列表的后面,上拉加载
            }

        }

        function getListDataFromNet(num,size,successCallback,errorCallback) {
            $.ajax({
                url: 'testSpPage?num='+num+'&size=2',
                success: function(curPageData) {
                    //设置列表数据
                    successCallback(curPageData);
                },
                error: errorCallback
            });
        }
    });
</script>
</html>