MeScroll 移动端刷新，分页

没有多研究里面的功能，下面有官网链接。

简单实现了我需要的功能，向上滑动，加载下一页数据。

（ps：一定要加样式！！！一定要加样式！！！一定要加样式！！！否则上拉会不行，本人已踩坑了）

引用：<link href="css/mescroll.css" rel="stylesheet" type="text/css" />

这里是必须有接收的div clss 需要用到

var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {
auto: false, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
callback: downCallback //下拉刷新的回调
},
up: {
auto: true,
callback: upCallback, //上拉加载的回调
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>'，

toTop:{ //配置回到顶部按钮
                       src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                       //offset : 1000
                   }
}
});

/*下拉刷新的回调 */
function downCallback() {
//联网加载数据
getListDataFromNet(0, 10, function (data) {
//联网成功的回调,隐藏下拉刷新的状态
mescroll.endSuccess();
//设置列表数据
setListData(data);
}, function () {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
});
}

/*上拉加载的回调 page = {num:1, size:10}; num:当前页从1开始, size:每页数据条数 */
function upCallback(page) {
//联网加载数据
getListDataFromNet(page.num, page.size, function (curPageData) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length);
mescroll.endSuccess(curPageData.length);

//设置列表数据
setListData(curPageData);
}, function () {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}

},
error: function (jsonObj) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
//联网成功的回调
successCallback && successCallback(newArr);
} catch (e) {
//联网失败的回调
errorCallback && errorCallback();
}
}, 1000)
}

function setListData(data) {
   var list = data.result;
   var html = '';
   for (var i in list) {
       html += '<li><div>订单号：' + list[i].orderStr + '</div>'
+ '<div>'
+ '<div>' + list[i].time + '</div>'
+ '<div>时间</div>'
+ '</div>'
+ '</div></li>';
   }

$('.doctor_report').append(html); //循环，添加到上面
}

官网： http://www.mescroll.com/

MeScroll 移动端刷新，分页相关推荐

一起谈.NET技术，ASP.NET MVC2.0在Tab页中实现异步无刷新分页
概述很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...
一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）
前面三篇文章实现了第一个目标,即无刷新分页.本文将实现第二个目标,即预览新闻内容.有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫). 我们先用伪ajax实现新闻内容的预览. ...
thinkphp+ajax无刷新分页并加载显示图片
2019独角兽企业重金招聘Python工程师标准>>> 最近自己用thinkphp和bootstrap做一个小站点,在用到ajax与后台数据库交互实现无刷新分页时,因为我需要返回的数 ...
php mysql ajax 分页_ajax+php+mysql无刷新分页代码(1/2)_PHP教程
ajax+php+mysql无刷新分页代码 ajax+php教程+mysql教程无刷新分页代码 2 3 4投票结果 5 6 7 8 9 function getxmlhttpobject() 10 { ...
smarty+php+ajax 简单无刷新分页
简介分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($ ...
Repeater无刷新分页
网上摘录前台: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" ...
无刷新分页 jquery.pagination.js
序言这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家. 友情提示下:我有一片博客是用着个js实现的无刷新分页也很好用 ...
jq分页不刷新页面_jQuery无刷新分页完整实例代码
本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地 ...
.net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
tp5 分页php不能foreach,tp5框架无刷新分页实现方法分析
本文实例讲述了tp5框架无刷新分页实现方法.分享给大家供大家参考,具体如下: 已tp5 分页为例, 1.默认生成的分页页码如下: « 1 2 » 2.点击页码值,跳转到对应的页面,并get传 p ...

MeScroll 移动端刷新，分页

MeScroll 移动端刷新，分页相关推荐

最新文章

热门文章