mescroll 实现下拉刷新,上拉加载
官网–自行下载js、css文件,当然,官网也提供了demo和API文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<script type="text/javascript" src="js/mescroll.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mescroll.css"></link>
</head>
<style type="text/css">
/*说明*/
.mescroll .notice{
font-size: 14px;
padding: 20px 0;
border-bottom: 1px solid #eee;
text-align: center;
color:#555;
}
/*列表*/
.mescroll{
position: fixed;
top: 0px;
bottom: 0;
height: auto;
}
.element::-webkit-scrollbar {display:none}
</style>
</head>
<body>
<!--滑动区域-->
<div id="mescroll" class="mescroll element">
<p class="notice">下拉刷新显示一个页数据,上拉加载分页数据</p>
<div id="newsList" class="news-list">
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
$(function(){
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
down: {
auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
},
up: {
page:{size:2},//每页显示几条,默认为10
auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
clearEmptyId: "newsList",//1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
autoShowLoading: true,//显示加载进度
noMoreSize: 1,//如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
lazyLoad: {
use: true // 是否开启懒加载,默认false
},
toTop:{ //配置回到顶部按钮
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
offset : 100
},
loadFull: {
use: true, //列表数据过少,是否自动加载下一页,直到满屏或者无更多数据为止;默认false
delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
},
empty: {
//列表第一页无任何数据时,显示的空提示布局;
tip: "根本没有数据好吧!!", //提示
},
}
});
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page){
var num = page.num -1;
getListDataFromNet(num, page.size, function(curPageData){
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
mescroll.endSuccess(curPageData.length,3);
setListData(curPageData);
}, function(){
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData) {
var listDom=$("#newsList");
for (var i = 0; i < curPageData.length; i++) {
var newObj=curPageData[i];
var str = '<span class="new-content">'+newObj.name+'--'+newObj.age+'</span><br/><br/><br/><br/><br/>';
listDom.append(str);//加在列表的后面,上拉加载
}
}
function getListDataFromNet(num,size,successCallback,errorCallback) {
$.ajax({
url: 'testSpPage?num='+num+'&size=2',
success: function(curPageData) {
//设置列表数据
successCallback(curPageData);
},
error: errorCallback
});
}
});
</script>
</html>