最近自己做一个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); }
至此功能已经实现，以此笔记 记录使用过程。