移动端下拉刷新上拉加载-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、效果

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

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

Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
MaterialRefreshLayout+ListView 下拉刷新上拉加载
效果图是这样的,有入侵式的,非入侵式的,带波浪效果的......就那几个属性,都给出来了,自己去试就行. 下拉刷新上拉加载关于下拉刷新-上拉加载的效果,有许许多多的实现方式,百度了一下竟然有几十种 ...
mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面使用mui双webview,实现下拉刷新上拉加载主页面: order_index.html <!doctype html> <html> < ...
带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
ListView实现Item上下拖动交换位置并且实现下拉刷新上拉加载更多
ListView实现Item上下拖动交换位置并且实现下拉刷新上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

随机推荐

Python的__main__.py用法
[背景] 在看flower的时候看到__main__.py文件,不知道具体做什么用? 故先进行测试看看. [测试代码] 测试代码目录结构如下: . `-- test |-- __init__.py | ...
OpenTSDB介绍
OpenTSDB 2.0, the scalable, distributed time series database可扩展.分布式时间序列数据库 1.背景一些老的监控系统,它常常会出现这样的问题 ...
深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
cardview和Palette，ActionBar颜色随图改变
CardView是一个控件,Palette是取色工具(工具类),本文会对他们进行比较细致的介绍,相信机制的各位看完一定轻而易举地实现ActionBar随图改变的特效. 首先看一下效果图: Gradle ...
Function Programming - First Class（一等公民function）
引用外界一等公民的定义:"在JavaScript世界中函数却是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值.传参.返回,这样的函数也称之为第一级函数 ...
springboot学习（二）——springmvc配置使用
以下内容,如有问题,烦请指出,谢谢上一篇讲解了springboot的helloworld部分,这一篇开始讲解如何使用springboot进行实际的应用开发,基本上寻着spring应用的路子来讲,从s ...
jQuery操作input改变value属性值
今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值类似于这样的效果当用户点击的时候文字消失. html代码 < ...
OpenStack搭建遇到的问题
前言:对于像我这种新手来说,搭建OpenStack真的很费劲,因为我总是每配置一个服务,我就想弄懂,后来搭建过程很累人,因此我想了个办法,等我搭建出来再学.我这里将记录我从开始之初到我学习,再到我毕业 ...
codeforces 883M. Quadcopter Competition 思路
M. Quadcopter Competition time limit per test 3 seconds memory limit per test 256 megabytes input st ...
初窥c++11：lambda函数及其用法
转载于:点击打开链接为什么需要lambda函数匿名函数是许多编程语言都支持的概念,有函数体,没有函数名.1958年,lisp首先采用匿名函数,匿名函数最常用的是作为回调函数的值.正因为有这样的需求 ...