用了一上午时间找各种插件
开始找的iscroll 网上找了很多例子。测试了很几遍,可以上拉下拉但是就是不执行对应的方法。估计自己道行太浅了。后来终于找到了dropload 这个插件,简单好用。给大家推荐一下
<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>移动端下拉刷新、上拉加载更多插件 </title>
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<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;
}
.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="./css/dropload.css">
</head>
<body>
<div class="content">
<div class="lists">
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
<h1>就当我是新闻页吧</h1>
</div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->
<script src="./js/common/zepto.min.js"></script>
<script src="./js/common/dropload.min.js"></script>
<script>
$(function() {
// 页数
var page = 0;
// 每页展示5个
var size = 5;
// dropload
$('.content').dropload({
scrollArea: window,
threshold: 100, //提前加载距离
loadUpFn: function(me) {
$.ajax({
type: 'GET',
url: 'http://ximan.github.io/dropload/examples/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) {
console.log(xhr, type)
// 即使加载出错,也得重置
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) {
console.log(xhr, type)
// 即使加载出错,也得重置
me.resetload();
}
});
}
});
});
</script>
</body>
</html>
github : https://github.com/ximan/dropload
.