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

     

      

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

移动端下拉刷新上拉加载-mescroll.js插件的更多相关文章

  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. MaterialRefreshLayout+ListView 下拉刷新 上拉加载

    效果图是这样的,有入侵式的,非入侵式的,带波浪效果的......就那几个属性,都给出来了,自己去试就行. 下拉刷新 上拉加载 关于下拉刷新-上拉加载的效果,有许许多多的实现方式,百度了一下竟然有几十种 ...

  7. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  8. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  9. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

随机推荐

  1. [转载] 从Hadoop到Spark的架构实践

    转载自http://www.csdn.net/article/2015-06-08/2824889 http://www.zhihu.com/question/26568496 当下,Spark已经在 ...

  2. [转载] 使用Redis的Java客户端Jedis

    转载自http://aofengblog.blog.163.com/blog/static/631702120147298317919/ 在实际的项目开发中,各种语言是使用Redis的客户端库来与Re ...

  3. 自动化部署必备技能—部署yum仓库、定制rpm包

    部署yum仓库.定制rpm包 目录 第1章 扩展 - yum缓存 1.1 yum缓存使用步骤... 1 1.1.1 导言... 1 1.1.2 修改配置文件... 1 1.1.3 使用缓存... 1 ...

  4. react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么？

    react-router 3 文档: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md react-router 4 ...

  5. org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.Integer

    使用hibernate时,在save方法时,报了:org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.In ...

  6. while循环小练习-猜答案

    条件 1.每个用户只能猜10次产品的价格2.每次猜玩价格,提示用户价格是多了还是少了或者对了3.如果用户才对则终止程序执行 break! i = 0 #设置一个次数变量 price = 38 #设置一 ...

  7. 企业级应用TOMCAT

    第1章 Tomcat 1.1 Tomcat简介 Tomcat是一个免开放源代码的Web应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不多的场合下被普遍使用,是开发调试JSP程序的首选,另 ...

  8. 开源项目 easydownload

    一个用于下载的 android library库,   源码 支持多线程断点下载, 支持消息通知. 支持优先级下载. 支持暂停,继续,删除下载列表 支持多服务器下载. 使用方式 compile 'co ...

  9. MapReduce 入门之一步步自实现词频统计功能

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7687120.html ------------------------------------ ...

  10. 【深度学习系列】用PaddlePaddle和Tensorflow实现AlexNet

    上周我们用PaddlePaddle和Tensorflow实现了图像分类,分别用自己手写的一个简单的CNN网络simple_cnn和LeNet-5的CNN网络识别cifar-10数据集.在上周的实验表现 ...