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

用户1174387

发布于 2018-01-17 12:10:11

8.9K0

发布于 2018-01-17 12:10:11

文章被收录于专栏：web开发web开发

最近无意间看到有这么一个上拉刷新下拉加载的插件 —— mescroll.js，个人感觉挺好用的，官网地址是：http://www.mescroll.com

然后我就看了一下文档，简单的写了一个小demo记录下来，因为没有过多需要解释说明的，所以直接贴出代码。

1、下载mescroll.js插件。

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

　　mescroll.min.css

　　mescroll.min.js

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mescroll-下拉刷新上滑加载</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="lib/mescroll.min.css">
    <script src="lib/mescroll.min.js"></script>
    <script src="lib/zepto.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .fl {
            position: absolute;
            top: 10px;
            left: 0;
            right: 120px;
        }
        .fr {
            float: right;
        }
        .top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            z-index: 9999;
            background-color: #ddd;
            padding-left: 10px;
        }
        .layout {
            width: 100%;
            height: 100%;
            padding-top: 50px;
        }
        .layout .content {
            padding: 10px;
        }
        .layout .content li {
            border-top: 1px solid #ddd;
            padding: 10px 0;
            position: relative;
        }
        .layout .content li:first-child {
            border-top: 0 none;
        }
        .layout .content li .title {
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .layout .content li .summary {
            margin-top:6px;
            height: 44px;
            line-height: 22px;
            font-size: 14px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .layout .content li .img img {
            float: right;
            width: 110px;
        }

        .mescroll .upwarp-nodata {
            padding-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="top">
        新闻列表
    </div>
    <div class="layout">
        <div id="mescroll" class="mescroll">
            <div class="mescroll-bounce">
                <ul id="content" class="content">
                </ul>
            </div>
        </div>
    </div>


    <script>
        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
            //如果下拉刷新是重置列表数据,那么down完全可以不用配置
            down: {
                callback: downCallback //下拉刷新的回调
            },
            up: {
                htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
                page: {
                    num: 0,
                    size: 10,
                    time: null
                },
                callback: upCallback    //上拉加载的回调
            }
        });

        var pageSize = 10;
        function downCallback(page) {
            $.ajax({
                url: 'http://172.16.5.102:8081/ssm_project/news/newsList.do?status=1&pageSize='+pageSize+'&pageIndex=1',
                type: 'get',
                data:{},
                success: function (res) {
                    $('#content').html('');
                    mescroll.resetUpScroll();
                },
                error: function () {
                    // 联网失败的回调,隐藏下拉刷新的状态
                    mescroll.endErr();
                }

            })
        }

        function upCallback(page) {
            $.ajax({
                url: 'http://172.16.5.102:8081/ssm_project/news/newsList.do?status=1&pageSize='+page.size+'&pageIndex='+page.num,
                type: 'get',
                data:{},
                success: function (res) {
                    var list = res.data;
                    var html = '';
                    if(res.success == 1 && list.length > 0){ //有数据
                        list.forEach(function (item) {
                            html += `<li class="clearfix">
                            <div class="fl">
                                <h4 class="title">${item.title}</h4>
                                <p class="summary">${item.summary}</p>
                            </div>
                            <div class="fr img">
                                <img src="${item.titleImg}">
                            </div>
                        </li>`
                        })
                    }
                    $('#content').append(html);
                    if(res.data && res.data.length == page.size) {
                        //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
                        mescroll.endSuccess(res.data.length, true);
                    }else{
                        //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
                        mescroll.endSuccess(res.data.length, false);
                    }
                },
                error: function () {
                    // 联网失败的回调,隐藏下拉刷新的状态
                    mescroll.endErr();
                }
            })
        }
    </script>
</body>
</html>