入了很多下拉加載上拉刷新的插件，但是感覺都不好用，知道最近遇到這款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>
壓縮文件在文件和百度雲盤中