最近自己做一个web app需要用到上拉查询下页数据，网上看了很多很多帖子，发现并不能快速的套用，总是会出现各种问题无法使用，于是无奈自己跑去看了官方api文档，终于做了出来，至此做个笔记，以后用到可以直接复制粘贴套用，好了不废话了，进入正题。
1.需要引用 mescroll.min.css , mescroll.min.js
这两个文件可以去http://www.mescroll.com/load.html下载，
也可以选择引用cdn：
// jsdelivr的CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.0/mescroll.min.js" charset="utf-8"></script>
2.添加以下布局(容纳操作内容的容器)
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能删
<div> //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)
//内容...
</div>
</div>
3.在head中添加style固定mescroll的div高度. 推荐通过定位的方式,简单快捷: (点此查看其他方法)
<style>
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
</style>
4. 创建mescroll对象(我是单独建了一个js文件) :
var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {
auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
callback: downCallback, //下拉刷新的回调
},
up: {
auto:true,//初始化完毕,是否自动触发上拉加载的回调
isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
callback: upCallback, //上拉加载的回调
/*toTop:{ //配置回到顶部按钮
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}*/
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 5 //每页数据条数,默认10
}
}
});
5. 处理回调 :
//下拉刷新的回调
function downCallback() {
$.ajax({
url: '',
success: function(data) {
//联网成功的回调,隐藏下拉刷新的状态;
mescroll.endSuccess(); //无参
//设置数据
//setXxxx(data);//自行实现 TODO
},
error: function(data) {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
});
}
//上拉加载的回调 page = {num:1, size:5};（这里size我在上面设置成5了，默认是10） num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
/* var pageIndex = page.num-1;*/ //若想从num=0开始，就把前面的注释打开。
$.ajax({
url: 'xxxxxxxx' + '?' + 'pageNum=' + page.num + '&pageSize=' + page.size,
dataType:'json',
type:'GET',
success: function(curPageData) {
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//必传参数(当前页的数据个数, 总数据量)
mescroll.endBySize(curPageData.shopList.length, curPageData.count); //这里面还有一堆方法，根据自己后端情况选择
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//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);
//结束下拉刷新的 mescroll.endSuccess()无参.
//结束上拉加载 curPageData.length必传的原因:
1.使配置的noMoreSize生效
2.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
比传入的totalPage, totalSize, hasNext具有更高的判断优先级
3.当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
传totalPage, totalSize, hasNext主要目的是避免方法四描述的小问题
//设置列表数据,自行实现，里面写你遍历像前台塞值过程
setListData(curPageData);
},
error: function(e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
//具体实现自行定义
function setListData(curPageData){
var html = '';
//这里，我后台返回的是个map集合，所以遍历店铺列表，拼接出卡片集合，具体自行定义
curPageData.shopList.map(function(item, index) {
html += '' + '<div class="withdrawals-panel card" data-shop-id="'
+ item.shopId + '">'
+ '<div class="groupby-img-panle "><a href="#"><img src="'
+ item.shopImg + '" class="am-img-responsive" /></a></div>'
+ '<div class="groupby-info-panle">'
+ '<h3>' + item.shopName + '</h3>'
+ '<p>' + item.shopDesc + '</p>'
+ '<p>' + new Date(item.lastEditTime).Format("yyyy-MM-dd") + '</p>'
+ '</div>'
+ '</div>';
});
$('.list-div').append(html);
}
至此功能已经实现，以此笔记 记录使用过程。