最近无意间看到有这么一个上拉刷新下拉加载的插件 —— 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. 很考验人的java内存加载面试题

    源代码如下,求结果 public class MemoryAnalyse { public static int k = 0; public static MemoryAnalyse t1 = new ...

  2. Android Weekly Notes Issue #283

    November 12th, 2017 Android Weekly Issue #283 本期内容包括Gradle相关的几篇,如封装繁杂依赖的技巧,通过kotlin dsl让gradle支持kotl ...

  3. [转载] RED-BLACK(红黑)树的实现TreeMap源码阅读

    转载自http://lxy2330.iteye.com/blog/1664786 由于平衡二叉树与红黑树都是二叉排序树,又红黑树是对平衡二叉树的一种改进实现,所以它的很多思想算法都来源于排序二叉或平衡 ...

  4. MD5 SHA1 HMAC HMAC_SHA1区别

    MD5.SHA1.HMAC.HMAC_SHA1区别 引言     什么是MD5,什么是SHA1,如何校验这些Hash.还有拿单个apk文件的MD5,SHA1讯问是不是原版的问题,在这里,让我们先来了解 ...

  5. 查看oracle数据库里哪些语句耗时最长或者效率最低

    CPU: select * from (select v.sql_id, v.child_number, v.sql_text, v.elapsed_time, v.cpu_time, v.disk_ ...

  6. ArrayList迭代过程删除问题

    一:首先看下几个ArrayList循环过程删除元素的方法(一下内容均基于jdk7): package list; import java.util.ArrayList; import java.uti ...

  7. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  8. MS08_067漏洞学习研究

    p197 MS08-067漏洞渗透攻击 按照书上的设置做,exploit得到错误信息: Exploit failed [unreachable]: Rex::ConnectionRefused The ...

  9. 关于Springboot整合mybatis启动的问题

    由于是刚pull下来的项目整体也不熟悉,然后项目无法正常启动,爆出的异常为: Invalid bound statement (not found) 这是由于创建的新模块mapper与扫描mapper ...

  10. CCF认证之——相反数

    这道题目非常简单! #include<iostream> using namespace std; int main() { ],n,count=; cin >> n; ; i ...