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

最近无意间看到有这么一个上拉刷新下拉加载的插件 —— 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>

3、效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

在Linode上部署React应用程序

React是一个用于构建用户界面的流行JavaScript库。虽然React经常被用作更复杂应用程序的前端,但它也足够强大,可以单独用于完整的客户端应用程序。

22240
来自专栏蓝天

Linux磁盘相关命令

sfdisk -l sfdisk -s fdisk -l dmesg |grep SCSI dmesg |grep -i raid df -h c...

12230
来自专栏GIS讲堂

Openlayers4中地图的导出

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

41420
来自专栏搞前端的李蚊子

三分钟使用webpack-dev-sever搭建一个服务器

webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新; 1.切换到你的目录...

38480
来自专栏分布式系统和大数据处理

Webpack入门

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

17720
来自专栏从零开始学自动化测试

python接口自动化12-案例分析(csrfToken)

前言: 有些网站的登录方式跟前面讲的博客园和token登录会不一样,把csrfToken放到cookie里,登录前后cookie是没有任何变化的,这种情况下如何...

32470
来自专栏DeveWork

360安全扫描之WordPress 页面异常导致本地路径泄漏 的漏洞修补

今天头脑一热到360安全检测那里去为自己的网站进行安全扫描了一番。上次扫描还是一年前,当初扫描一个网站是 94 分,那时候还不懂代码,就这么挂着,被360 公开...

23850
来自专栏CRPER折腾记

Vue 折腾记 - (12) Nuxt.js写一个校验访问浏览器设备类型及环境的中间件

Nuxt.js就是一个Vue的服务端渲染框架,和React的服务端渲染框架Next.js类似,

25620
来自专栏老马寒门IT

05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准...

386120
来自专栏微信小开发

小程序无限加载

小程序无限加载 什么是无限加载呢? 比如 刷朋友圈的时候,一直往下拉一直都会有内容 就像没有尽头一样,可以不断的加载出东西来,也可以叫滚动加载。数据不可能在打开...

54350

扫码关注云+社区

领取腾讯云代金券