【前端】上拉加载更多dropload.min.js的使用
代码如下：入职代码修改接口及html为自己的即可（下面主要展示js部分）
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta name=”referrer” content=”never”>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<script src=”../../../static/js/common/jquery.js”></script>
<!–上拉加载更多–>
<link rel=”stylesheet” href=”http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/css/common/dropload.css” />
<script src=”http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/”></script>
<title>上拉加载更多</title>
</head>
<body>
<div class=”content_02″>
<div class=”lists”>
<!–<a href=”javascript:;”>
<div class=”free_content_box overh”>
<div class=”fl left”><img src=”../../../static/images/Free_insurance/code_03.png” /></div>
<div class=”fl mid”>
<p class=”title”>10万安心出游险</p>
<p class=”age”>年龄:18-79  保额:10万  保障期限:30天</p>
<p class=”more overh”>
<a class=”fl” href=”javascript:;”>所需金币：5金币</a>
<a class=”fr under” href=”javascript:;”><span class=”un”>查看详情</span> ></a>
</p>
</div>
</div>
</a>–>
</div>
</div>
<script type=”text/javascript”>
//上拉加载更多
var page = 0;
$(\’.content_02\’).dropload({
scrollArea: window,
domDown: {
domClass: \’dropload-down\’,
domRefresh: \'<div class=”dropload-refresh”>↑上拉加载更多</div>\’,
domLoad: \'<div class=”dropload-load”>正在加载</div>\’,
domNoData: \'<div class=”dropload-noData”>已加载完成</div>\’
},
loadDownFn: function(me) {
console.log(\’666\’)
page++; // 每次请求，页码加1
//获取产品信息列表渲染
var data = {
“page”: page,
“type_id”: 1
}
console.log(page);
//渲染列表
$.post(\’http://fx.topmdrt.com/ZhongMinWang/listProduct\’, data, function(res) {
console.log(res);
var prod = res.data;
if(res.errCode == “0”) {
var result = \’\’;
for(var i = 0; i < prod.products.length; i++) {
result += \'<a>kai</a>\’
if(prod.products.length < 5 && i == prod.products.length – 1) {
// 锁定 prod.products.length这里注意换成自己的长度
me.lock();
// 无数据
me.noData();
break;
}
}
//为了测试，延迟1秒加载
setTimeout(function() {
$(\’.lists\’).append(result);
// 每次数据加载完，必须重置
me.resetload();
}, 1000);
} else if(res.errCode == “1002”) {
$(“.dropload-down”).hide();
console.log(res.errMsg);
}
}, \’json\’)
threshold: 50
}
})
</script>
</body>
</html>