<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style>
.content{
max-width: 640px;
margin: 0 auto;
background-color: #fff;
}
.content .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.content .item img{
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
}
.content .item h3{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
}
.content .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
}
.opacity{
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
<link rel="stylesheet" href="dropload.css">
</head>
<body>
<div class="content">
<div class="lists"></div>
</div>
</body>
<script src="zepto.min.js"></script>
<script src="dropload.min.js"></script>
<script>
$(function(){
// 页数
var page = 0;
// 每页展示5个
var size = 20;
// dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php',
dataType: 'json',
data:{'page':page,'size':size},
success: function(data){
var arrLen = data.length;
if(arrLen <=0){
// 锁定
me.lock();
// 无数据
me.noData();
}
for(var i=0; i<arrLen; i++){
result +='<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
//把数据插入页面中
setTimeout(function(){
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
</script>
</html>
H5移动端上滑加载，带ajax异步请求后台数据，拿来即用
5星 · 超过95%的资源 需积分: 49 12 浏览量
2018-01-31
11:20:36
上传
评论 2
收藏 13KB RAR 举报 
上滑加载.rar （4个子文件） 
上滑加载 
dropload.min.js 4KB dropload.css 1KB zepto.min.js 24KB
index.html 4KB资源评论
weixin影子2018-10-19后台怎样请求的？在后台我试了很多请求方式都没反应
zhixu3692018-10-27首先需要安装php服务器软件，比如phpstudy，然后把整个文件放到服务器www目录，通过127.0.0.1访问，就可以测试了
w206195432018-07-05很实用不错
