代码如下:
<link rel="stylesheet" href="dist/dropload.css">
...
<div class="content">
<div class="lists">
...
</div>
</div>
<script src="dist/dropload.min.js"></script>
<script>
$(function() {
var counter = 0;
// 每页展示4个
var num = 1;
var pageStart = 0,
pageEnd = 0;
// dropload
$('.content').dropload({
scrollArea: window,
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>'
},
loadDownFn: function(me) {
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data) {
console.log(data);
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
for (var i = pageStart; i < pageEnd; i++) {
result =
'<div role="tabpanel" class="tab-pane active" id="tabMobile"><div class="row caseItem"><div class="col-md-3 col-sm-3 col-xs-12 iphone-image"><img src="' +
data.lists[i].pic + '" alt=""/></div><div class="col-md-9 col-sm-9 col-xs-12"><h5>' + data.lists[i].title +
'</h5><p>' + data.lists[i].text + '</p></div></div></div>';
if ((i + 1) >= data.lists.length) {
// 锁定
me.lock();
// 无数据
me.noData();
break;
}
}
// 为了测试,延迟1秒加载
setTimeout(function() {
$('.lists').append(result);
// 每次数据加载完,必须重置
me.resetload();
}, 500);
},
error: function(xhr, type) {
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},
threshold: 350
});
});
</script>
threshold这个属性是提前加载距离,修改这个数值就可以。