专栏首页web开发移动端下拉刷新上拉加载-mescroll.js插件

移动端下拉刷新上拉加载-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 条评论
登录 后参与评论

相关文章

  • Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-croppe...

    用户1174387
  • 自实现PC端jQuery版轮播图

      最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就...

    用户1174387
  • 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

    用户1174387
  • CSS3 Background 属性介绍

    与border类似,ie对新的background属性都是不支持的。多的就不说了,来看看,新的background 属性吧。

    py3study
  • CSS的奇淫技巧

    当一个盒容器的两条边框在边角处相交时,浏览器就会在交点处按某个角度绘制接合线。 如果将这个盒容器的width和height设置为0,并为每条边框设置一个较粗的w...

    Liues
  • android值得珍藏的6个开源框架技术

    1、volley  项目地址 https://github.com/smanikandan14/Volley-demo JSON,图像等的异步下载; 网络请...

    xiangzhihong
  • php与githook实现自动更新

    git系统仓库一般都会支持这个hook配置,在发生事件的时候触发执行,可以是https推送等通知形式。

    宣言言言
  • ionic2引入cordova插件时提示 no provider for * 错误

    mcq
  • web前端学习:React是什么,为什么要使用它?

    React是Facebook内部的一个JavaScript类库,已于1年开源,可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动...

    一墨编程学习
  • web前端学习:React是什么,为什么要使用它?

    React是Facebook内部的一个JavaScript类库,已于1年开源,可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动...

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券