|
第一步,下载dropload插件,dropload插件下载地址 官方文档:https://github.com/ximan/dropload
第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的
第三步,将以下代码放到页面的最底部,注意是最底部,否则dropload插件获取不了高度
- **基本代码结构**//#content为某个p的id var dropload = $('#content').dropload({
- //scrollArea很关键,要不然加载更多不起作用 scrollArea : window,
- domUp : {
- domClass : 'dropload-up',
- domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',
- domUpdate : '<p class="dropload-update">↑释放更新</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>' },
- domDown : {
- domClass : 'dropload-down',
- domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',
- domNoData : '<p class="dropload-noData">暂无数据</p>'
- },
- loadUpFn : function(me){
- //下拉刷新需要调用的函数
- alert("下拉刷新需要调用的函数");
- //重置下拉刷新
- me.resetload();
- },
- loadDownFn : function(me){
- //上拉加载更多需要调用的函数
- alert("上拉加载更多需要调用的函数");
- //定时器函数,为了看出上拉加载更多效果
- setTimeout(function(){
- // 每次数据加载完,必须重置
- me.resetload();
- },1000);
- }
- });
复制代码
一些完整的例子 按需查看就好
示例一、加载底部
- <script>$(function(){
- // 页数
- var page = 0; // 每页展示5个
- var size = 5; // dropload调用
- $('.content').dropload({
- scrollArea : window,
- 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();
- }
- });
- }
- });
- });</script>
复制代码
示例二、加载顶部、底部
- <script>
- $(function(){
- // 页数
- var page = 0; // 每页展示10个
- var size = 10; // dropload
- $('.content').dropload({
- scrollArea : window,
- domUp : {
- domClass : 'dropload-up',
- domRefresh : '<p class="dropload-refresh">↓下拉刷新-自定义内容</p>',
- domUpdate : '<p class="dropload-update">↑释放更新-自定义内容</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>'
- },
- domDown : {
- domClass : 'dropload-down',
- domRefresh : '<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>',
- domNoData : '<p class="dropload-noData">暂无数据-自定义内容</p>'
- },
- 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>
复制代码
示例三、多次加载
$(function(){
//利用此写法,可以限制多次加载的个数。
var timer;
$('.header .ipt').on('input',function(){
var _length = $(this).val(); // 如果输入值不是数字或者是空,就跳出
if(isNaN(_length) || _length === ''){
return false;
}
clearTimeout(timer);
timer = setTimeout(function(){//也可不用定时器
// 清空内容
$('.lists').html('');
$('.dropload-down').remove();
var counter = 0; // 每页展示4个
var num = 4;
var pageStart = 0,pageEnd = 0; // dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data){
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
.for(var i = pageStart; i < pageEnd; i++){
result += '<a class="item opacity" href="'+data.lists.link+'">'
+'<img src="'+data.lists.pic+'" alt="">'
+'<h3>'+data.lists.title+'</h3>'
+'<span class="date">'+data.lists.date+'</span>'
+'</a>';
if((i + 1) >= _length || (i + 1) >= data.lists.length){ // 锁定
me.lock(); // 无数据
me.noData();
break;
}
} // 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').append(result); // 每次数据加载完,必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!'); // 即使加载出错,也得重置
me.resetload();
}
});
}
});
},500);
});
示例四、固定布局,加载顶部、底部
- $(function(){
- // 按钮操作
- $('.header .btn').on('click',function(){
- var $this = $(this);
- if(!!$this.hasClass('lock')){
- $this.attr('class','btn unlock');
- $this.text('解锁'); // 锁定
- dropload.lock();
- $('.dropload-down').hide();
- }else{
- $this.attr('class','btn lock');
- $this.text('锁定'); // 解锁
- dropload.unlock();
- $('.dropload-down').show();
- }
- }); // dropload
- var dropload = $('.inner').dropload({
- domUp : {
- domClass : 'dropload-up',
- domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',
- domUpdate : '<p class="dropload-update">↑释放更新</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'
- },
- domDown : {
- domClass : 'dropload-down',
- domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',
- domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',
- domNoData : '<p class="dropload-noData">暂无数据</p>'
- },
- 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); // 每次数据加载完,必须重置
- dropload.resetload();
- },1000);
- },
- error: function(xhr, type){
- alert('Ajax error!'); // 即使加载出错,也得重置
- dropload.resetload();
- }
- });
- },
- loadDownFn : function(me){
- $.ajax({
- type: 'GET',
- url: 'json/more.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').append(result); // 每次数据加载完,必须重置
- dropload.resetload();
- },1000);
- },
- error: function(xhr, type){
- alert('Ajax error!'); // 即使加载出错,也得重置
- dropload.resetload();
- }
- });
- }
- });
- });
复制代码
以上就是关于dropload.js使用方法 的详细内容
|
|