引入dropload.js
dropload.js支持jquery和zepot,以jquery为例,在页面底端引入jquery和dropload.js:
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/dropload.min.js" ></script>
使用dropload.js
$(function(){
var paging = 1;//页码数
// 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>'
},
// 1 . 下拉刷新 回调函数
loadUpFn : function(me){
$.ajax({
type: 'GET',
// 每次获取最新的数据即可
url: '',
dataType: 'json',
success: function(data){
// $.ajax()虽然接口提供json字符串,但接收到的是 json对象
var result = '';
// 循环拼接显示内容 DOM
// 刷新获取多少数据,显示多少 使用html()重置 lists DOM
for(var i = 0; i < data.data.length; i++){
result += '<a class="item opacity" href="'+data.data[i].link+'">'
+'<img src="'+data.data[i].pic+'" alt="">'
+'<h3>hehe</h3>'
+'<span class="date">'+data.data[i].id+'</span>'
+'</a>';
}
// 为了测试,延迟1秒加载
setTimeout(function(){
// 插入加载使用 html() 重置 DOM
$('.lists').html(result);
// 每次数据加载完,必须重置
me.resetload();
},1000);
},
// 加载出错
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},
// 2 . 上拉加载更多 回调函数
loadDownFn : function(me){
paging++; // 每次请求,页码加1
$.ajax({
type: 'GET',
url: '',
dataType: 'json',
success: function(data){
// data = JSON.parse(data);
var result = '';
// 选择需要显示的数据 拼接 DOM
for(var i = 0; i < data.data.length; i++){
result += '<a class="item opacity" href="'+data.data[i].link+'">'
+'<img src="'+data.data[i].pic+'" alt="">'
+'<h3>heheh</h3>'
+'<span class="date">'+data.data[i].id+'</span>'
+'</a>';
if(data.data.length<15){
// 再往下已经没有数据
// 锁定
me.lock();
// 显示无数据
me.noData();
break;
}
}
// 为了测试,延迟1秒加载
setTimeout(function(){
// 加载 插入到原有 DOM 之后
$('.lists').append(result);
// 每次数据加载完,必须重置
me.resetload();
},1000);
},
// 加载出错
error: function(xhr, type){
// 即使加载出错,也得重置
me.resetload();
}
});
},
threshold : 50
});
});
踩坑dropload.js
以前在使用dropload的时候踩过一次坑,时隔一年再次使用dropload的时候仍然踩了一次同样的坑!
页面加载会立即调用dropload的loadDownFn
方法,但是这个时候出现问题了,会一次请求n次接口,把所有的数据请求出来了,是不是想哭了?
经过不断的努力,发现在对#content
初始化的时候,#content
的高度被我设置成了100%,只需要把这个删掉就好了。
最后
以后使用dropload的时候可能还会遇见各种各样的坑,慢慢更新吧!