js上拉加载下拉刷新 写在前边:
工作需要,使用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--”