本文详细介绍了如何使用MeScroll库在网页中实现下拉刷新和上拉加载更多的功能。通过创建MeScroll对象并配置相关参数，可以轻松实现数据的动态加载。示例代码展示了如何在数据为空、加载数据以及处理错误的情况。适用于前端开发者学习和参考。
官网：http://www.mescroll.com/
一个简单的demo，无数据时候的空白显示暂时没写。
下拉刷新demohtml,body,div{
padding;0;margin:0;
}
.mescroll{
left:0;
width:100%;
position: fixed;
top: 0;
bottom: 0;
height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
.name{
height:4rem;
line-height:4rem;
text-align: center;
font-size:1rem;
color:#333;
border-bottom:1px solid #eee;
}
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
up: {
auto: true,
isBounce: false, //如果为true，某些ios手机会有bug
callback: upCallback,
htmlNodata: '
-- 结束 --
',},
down: {
use:false//默认为true，不使用的时候必须加上
}
});
function upCallback(page){
console.log(page.num+page.size);//默认page=1，size=10，每次调用page+1
//延时一秒,模拟ajax。
setTimeout(function () {
var success = true;//ajax成功的回调
if(success){
var data = {total:30,data:[{"name":"name1"},{"name":"name2"},{"name":"name3"},{"name":"name4"},{"name":"name5"},{"name":"name6"},{"name":"name7"},{"name":"name8"},{"name":"name9"},{"name":"name10"}]}
for(var i in data.data){
$(".doctor_report").append('
}
mescroll.endSuccess(data.data.length);
mescroll.endBySize(data.data.length, data.total);//满足条件后不再触发上拉刷新
}else{
mescroll.endErr();
}
},1000)
}
})
QQ图片20190326201535.png
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
