引入dropload插件
需要引入的文件
<script src="js/zepto.min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>订单明细</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/order.css" />
<link rel="stylesheet" href="css/dropload.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="order_nav">
<div class="header"><a class="return_img" href="income.html"><img src="img/firework/ios/[email protected]"></a><span
class="h_h">订单明细</span></div>
<div class="search">
<form>
<span><img src="img/firework/ios/[email protected]"></span>
<input type="text" name="search" placeholder="搜索订单号">
</form>
</div>
<div class="content">
<div class="lists">
<!-- <div class="box box_lis1">
<div class="box_l"><img src="img/firework/ios/[email protected]"></div>
<div class="box_r">
<dl>
<dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt>
<dd class="text_1"><strong>￥53</strong>   <span>奖励:￥1.32</span></dd>
<dd class="text_2">订单号:252723008808410657</dd>
</dl>
</div>
<div class="line"><img src="img/firework/ios/[email protected]"></div>
<div class="box_p">
<p class="p1">2018年11月11日01:47创建</p>
<p class="p2">2018年11月06日13:05结算</p>
</div>
</div> -->
</div>
</div>
</div>
<script type="text/javascript">
var aInp = document.getElementsByTagName('input')[0];
aInp.onclick = function () {
aInp.style.textAlign = "left";
}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
<script>
$(function () {
var page = -1; // 页数 初始化设置为0
// var size = 10; //后台设置每页数据的长度
var result = ''; //初始化加载的数据
// dropload
var dropload = $('.content').dropload({
scrollArea: window,
domUp: {
domClass: 'dropload-up',
domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate: '<div class="dropload-update">↑释放更新</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData: '<div class="dropload-noData">暂无数据</div>'
},
// 下拉刷新
loadUpFn: function (me) {
console.log('下拉刷新')
$.ajax({
type: 'POST',
url: 'https://minih.com/find',
dataType: "json",
data: {
st: 1, //页码
},
success: function (data) {
var result = '';
for (var i = 0; i < data.list.length; i++) {
result +=
'<div class="box box_lis1"><div class="box_l"><img src="img/firework/ios/[email protected]"></div><div class="box_r"><dl><dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt><dd class="text_1"><strong>￥53</strong>   <span>奖励:￥1.32</span></dd><dd class="text_2">订单号:252723008808410657</dd></dl></div><div class="line"><img src="img/firework/ios/[email protected]"></div><div class="box_p"><p class="p1">2018年11月11日01:47创建</p><p class="p2">2018年11月06日13:05结算</p></div></div>';
}
setTimeout(function () {
$('.lists').html(result);
// 每次数据加载完，必须重置
me.resetload();
// 重置页数，重新获取loadDownFn的数据
page = 1;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
}, 1000);
},
error: function (xhr, type) {
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
// 上拉加载
loadDownFn: function (me) {
console.log('上拉加载')
page++;
console.log(page);
// 拼接HTML
var result = '';
$.ajax({
type: 'POST',
url: 'https://minih.bnln100.com/mini/jd/find?token=mu_2389f129-463d-4955-88c2-4a701c69a310&key=&deviceId=%2Fmini&partnerId=88888&sign=e2899aafb57f186181dc37520d96c957',
dataType: 'json',
data: {
st: page, //页码
},
success: function (data) {
var arrLen = data.list.length;
if (arrLen > 0) {
for (var i = 0; i < arrLen; i++) {
result +=
'<div class="box box_lis1"><div class="box_l"><img src="img/firework/ios/[email protected]"></div><div class="box_r"><dl><dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt><dd class="text_1"><strong>￥53</strong>   <span>奖励:￥1.32</span></dd><dd class="text_2">订单号:252723008808410657</dd></dl></div><div class="line"><img src="img/firework/ios/[email protected]"></div><div class="box_p"><p class="p1">2018年11月11日01:47创建</p><p class="p2">2018年11月06日13:05结算</p></div></div>';
}
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
// 如果没有数据
} else {
console.log('没有数据')
// 锁定 // 无数据
me.lock();
me.noData(true);
me.resetload();
}
// 为了测试，延迟1秒加载
// setTimeout(function () {
// // 插入数据到页面，放到最后面
// $('.lists').append(result);
// // 每次数据插入，必须重置
// me.resetload();
// }, 1000);
},
error: function (xhr, type) {
console.log('网络错误')
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold: 50
});
});
</script>
</body>
</html>