一、需要的js和scc,(完整的demo也有)下载地址链接:https://pan.baidu.com/s/103dptJ8s77f8bA30D3B9kg 密码:seaq
二、直接上代码(需要严格按照代码中的div格式。复制样式回有问题。不会影响到你自己的css样式的。)
<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>加载顶部、底部</title>
<style>
*{
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
html{
font-size:10px;
}
body{
background-color: #f5f5f5;
font-size: 1.2em;
}
.header{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.header h1{
text-align: center;
font-size: 2rem;
font-weight: normal;
}
.content{
padding-bottom: 40px;
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;
}
}
.footer{
position: fixed;
left: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 40px;
}
.footer a{
position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 40px;
text-align: center;
color: #666;
background-color: #eee;
text-decoration: none;
}
.footer a:before{
content: '';
position: absolute;
left: 0;
top: 10px;
width: 1px;
height: 20px;
background-color: #ccc;
}
.footer a:first-child:before{
display: none;
}
</style>
<link rel="stylesheet" href="../dist/dropload.css">
</head>
<body>
<div class="header">
<h1>就当我是新闻页吧</h1>
</div>
<div class="content">
<div class="lists">
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>12文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
</div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
$(function(){
// 页数
var page = 0;
// 每页展示10个
var size = 10;
// 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){
$.ajax({
type: 'GET',
url: 'json/update.json',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').html(result);
// 每次数据加载完,必须重置
me.resetload();
// 重置页数,重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = data.length;
if(arrLen > 0){
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>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试,延迟1秒加载
setTimeout(function(){
// 插入数据到页面,放到最后面
$('.lists').append(result);
// 每次数据插入,必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},
threshold : 50
});
});
</script>
</body>
</html>
三、需要注意的地方
1.result这个是你拼接的HTML,换成你自己的就行!
2.再有不明白的就留言。我会及时回复你!