入了很多下拉加载上拉刷新的插件，但是感觉都不好用，知道最近遇到这款dropload的插件，瞬间打开新世界的大门啊，无卡顿简单易用可配置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<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">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 清除缓存 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/dropload.min.js"></script>
<script src="js/fontSi.js"></script>
<script type="text/javascript" src="js/driverlist.js"></script>
<title>教练列表</title>
<link rel="stylesheet" href="css/dropload.css" />
<link href="css/both.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body class="be">
<div class="content">
<div class="dirver-box">
<div class="driver-list">
<ul>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var page = 0;
var size = 5;
var count = 2;
//dropload
$(".driver-list").dropload({
scrollArea: window,
//上拉刷新数据
loadUpFn: function(me) {
$.ajax({
url: getv1 + '/index/institution/*********',
type: 'GET',
dataType: 'json',
data: {
inscode: '***********',
pageNo: 1,
pageSize: 5
},
success: function(res) {
//金牌教练
/*$(".driver-list ul").children('li').remove();*/
var coalen = res.data.coachs.length;
if (coalen > 0) {
count++;
var coachlist = "";
for (var j = 0; j < coalen; j++) {
var coname = res.data.coachs[j].name; //教练名字
var cophoto = res.data.coachs[j].photo; //教练照片
var cooverall = res.data.coachs[j].overall; //教练评分
var coteach = res.data.coachs[j].teachDate; //驾培教龄
var cotype = res.data.coachs[j].teachPermitted; //教学类型
if (cophoto != "") {
var driimg = '<img src="' + cophoto + '">';
} else {
var driimg = '<img src="img/driimg.png">';
}
/*教练星级*/
var coapf = "";
for (var i = 0; i < cooverall; i++) {
coapf += '<img src="img/starm.png">';
}
for (var i = 0; i < 5 - cooverall; i++) {
coapf += '<img src="img/stark.png">';
}
coachlist += '<li class="drilist clearfix"><div class="dri-img">' + driimg + '</div><div class="dri-info"><p class="dri-name">' + coname + '</p><span class="star">' + coapf + '</span><p class="dri-kind clearfix">教学类型:<span class="kind">' + cotype + '</span></p><p class="dri-kind clearfix">驾培教龄:<span class="teach">' + coteach + '年</span></p></div><div class="dri-enter"><span><img src="img/driento.png"></span></div></li>';
}
}
//延迟1秒加载
setTimeout(function() {
$(".driver-list ul").append(coachlist);
//每次数据插入,必须重置
me.resetload();
//解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
}, 500)
},
error: function(xhr, type) {
alert('Ajax error!');
//即使加载出错,也得重置
me.resetload();
}
});
},
//下拉加载数据
loadDownFn: function(me) {
$.ajax({
url: getv1 + '/index/institution/********',
type: 'GET',
dataType: 'json',
data: {
inscode: '**********',
pageNo: count,
pageSize: 5
},
success: function(res) {
//金牌教练
var coalen = res.data.coachs.length;
if (coalen > 0) {
count++;
var coachlist = "";
for (var j = 0; j < coalen; j++) {
var coname = res.data.coachs[j].name; //教练名字
var cophoto = res.data.coachs[j].photo; //教练照片
var cooverall = res.data.coachs[j].overall; //教练评分
var coteach = res.data.coachs[j].teachDate; //驾培教龄
var cotype = res.data.coachs[j].teachPermitted; //教学类型
if (cophoto != "") {
var driimg = '<img src="' + cophoto + '">';
} else {
var driimg = '<img src="img/driimg.png">';
}
/*教练星级*/
var coapf = "";
for (var i = 0; i < cooverall; i++) {
coapf += '<img src="img/starm.png">';
}
for (var i = 0; i < 5 - cooverall; i++) {
coapf += '<img src="img/stark.png">';
}
coachlist += '<li class="drilist clearfix"><div class="dri-img">' + driimg + '</div><div class="dri-info"><p class="dri-name">' + coname + '</p><span class="star">' + coapf + '</span><p class="dri-kind clearfix">教学类型:<span class="kind">' + cotype + '</span></p><p class="dri-kind clearfix">驾培教龄:<span class="teach">' + coteach + '年</span></p></div><div class="dri-enter"><span><img src="img/driento.png"></span></div></li>';
}
}
//如果没有数据
else {
//锁定
me.lock();
//无数据
me.noData();
}
//延迟1秒加载
setTimeout(function() {
$(".driver-list ul").append(coachlist);
//每次数据插入,必须重置
me.resetload();
}, 500)
},
error: function(xhr, type) {
alert('Ajax error!');
//即使加载出错,也得重置
me.resetload();
}
});
},
threshold : 50
});
</script>
</body>
</html>
压缩文件在文件和百度云盘中