写在前边:

工作需要,使用ajax在原来的列表下边使用ajax请求后台数据,拼接在列表最下边,在github转了好久,发现了一个bug极多的js刷新插件,尝试了一个下午,就在快放弃的时候,发现下边有留言说用mescroll框架比较简单好用。遂研究许久,做Javaweb嘛,难免碰前端……

mescroll.js快速上手:

前往mescroll官网下载js和css :http://www.mescroll.com/load.html

1. 下载并引用 mescroll.min.css , mescroll.min.js

2. 拷贝以下布局结构 :

<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
//列表内容,如:<ul>列表数据</ul> ...
</div>

3.创建mescroll对象 :

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {
callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
},
up: {
callback: upCallback //上拉加载的回调
}
});

4. 处理回调 :

     //下拉刷新的回调
function downCallback() {
$.ajax({
url: 'xxxxxx',
success: function(data) {
//联网成功的回调,隐藏下拉刷新的状态;
mescroll.endSuccess(); //无参
//设置数据
//setXxxx(data);//自行实现 TODO
},
error: function(data) {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
});
} //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
$.ajax({
url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?
success: function(curPageData) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置) //方法一(推荐): 后台接口有返回列表的总页数 totalPage
//必传参数(当前页的数据个数, 总页数)
//mescroll.endByPage(curPageData.length, totalPage); //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//必传参数(当前页的数据个数, 总数据量)
//mescroll.endBySize(curPageData.length, totalSize); //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//必传参数(当前页的数据个数, 是否有下一页true/false)
//mescroll.endSuccess(curPageData.length, hasNext); //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
//如果传了hasNext,则翻到第二页即可显示无更多数据.
//mescroll.endSuccess(curPageData.length); //设置列表数据
//setListData(curPageData);//自行实现 TODO
},
error: function(e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}

================分割线:以上均来自mescroll官网,也是最基本的==============

下边开始写一些在使用这个框架时候用到的方法:

mescroll.endSuccess(date.length,false); //这个方法这样用可以使上拉加载的圈的层隐藏起来,常用于ajax判断返回的参数是否为空,为空则关闭加载层
<style type="text/css">
.mescroll{
position: fixed;
top: 44px;
bottom: 37px;
height: auto;
}
</style>
在head中加入这个来自适应整个要滚动的层的高度,其中top的值可以修改成自己标题栏的高度,这样就不会出现标题栏下出现一大块空白
mescroll.resetUpScroll(); //这个方法用于下拉刷新重置了因下拉动作而到底的底部显示,也因此会多回调一次上拉加载(此方法内部调用),每次下拉刷新回调的地方都有重置一次
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip"></p>', //上拉加载中的布局,p标签随意定义,前边的是个会转的圈,这两行在up中
htmlNodata: '<p class="upwarp-nodata"></p>', //无数据的布局,其中p标签中可以写自己想要的文字
noMoreSize: 5, //这个是当页面显示不足这个数字的时候不显示到底定义的文字,比如不满足5条,则不显示最下方的“--end--”

Tips:小技巧,将压缩的js和css解压缩后修改其中的属性值(不解压能看懂的,当我没说),可以达到更适合页面的效果

【学习笔记】js下拉刷新、上拉加载 mescroll框架的使用的更多相关文章

  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. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  4. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

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

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

  6. js 前端实现下拉刷新 上拉加载

    效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...

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

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

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

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

  9. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  10. react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

随机推荐

  1. 【二十七】php之绘图技术(gd、jpgraph、短信随机验证码)

    1.绘图技术(GD库) 注意:使用该库,php.ini文件中的extension=php_gd2.dll必须是开启状态,不然无法使用 图片格式:目前网站开发常见的图片格式有gif,jpg/jpeg,p ...

  2. 跟我一起读postgresql源码(七)——Executor(查询执行模块之——数据定义语句的执行)

    1.数据定义语句的执行 数据定义语句(也就是之前我提到的非可优化语句)是一类用于定义数据模式.函数等的功能性语句.不同于元组增删査改的操作,其处理方式是为每一种类型的描述语句调用相应的处理函数. 数据 ...

  3. K:java序列化与反序列化—transient关键字的使用

      首先,应该明白的是transient是java中的一个关键字,音标为 英: [ˈtrænziənt].   在了解transient关键字之前,应该先弄明白序列化和反序列化.所谓的序列化,通俗点的 ...

  4. 房上的猫:经典排序算法 - 冒泡排序Bubble sort

    原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换,这样一趟过去后,最大或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束,以此类推例子为从小到大排 ...

  5. Layout 不可思议(二)—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  6. 深入了解CSS字体度量,行高和vertical-align

    line-height和vertical-align在CSS中是两个简单的属性.如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们.但事实上并不如此.他们其实很复杂,也是CSS中 ...

  7. 标准模式 怪异模式 盒模型 doctype

    在页面顶部设置 doctype是为了统一标准 浏览器有标准模式和怪异模式 而这两种模式最大区别就是 盒模型的解析不同 ============================== 图片摘自网络 === ...

  8. Sequelize 基本操作

    Sequelize 是 Node 的一个 ORM(Object-Relational Mapping) 框架,用来方便数据库操作. 配置 sequelize 以 mysql 为例 首先我们要引入npm ...

  9. 第十四章:Python の Web开发基础(一) HTML与CSS

    本課主題 HTML 介绍 CSS 介绍 HTML 介绍 HTML 的头部份,重点: 定义HTML 的编码:<meta charset="UTF-8"/> 定义标题: & ...

  10. [树莓派(raspberry pi)] 02、PI3安装openCV开发环境做图像识别(详细版)

    前言 上一篇我们讲了在linux环境下给树莓派安装系统及入门各种资料 ,今天我们更进一步,尝试在PI3上安装openCV开发环境. 博主在做的过程中主要参考一个国外小哥的文章(见最后链接1),不过其教 ...