官网：http://www.mescroll.com/
一个简单的demo，无数据时候的空白显示暂时没写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>下拉刷新demo</title>
<link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.css">
</head>
<style>
html,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;
}
</style>
<body>
<div id="all_report">
<div id="mescroll" class="mescroll">
<div class="doctor_report">
</div>
</div>
</div>
<!-- js部分 -->
<script src="../js/jquery.min.js"></script>
<script src="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.js" charset="utf-8"></script>
<script> $(function(){
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
up: {
auto: true,
isBounce: false, //如果为true，某些ios手机会有bug
callback: upCallback,
htmlNodata: '<p class="upwarp-nodata">-- 结束 --</p>',
},
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('<div class="name">'+data.data[i].name+'</div>');
}
mescroll.endSuccess(data.data.length);
mescroll.endBySize(data.data.length, data.total);//满足条件后不再触发上拉刷新
}else{
mescroll.endErr();
}
},1000)
}
})
</script>
</body>
</html>
QQ图片20190326201535.png
