dropload.js插件下拉刷新和上拉加载怎么用

小编给大家分享一下dropload.js插件下拉刷新和上拉加载怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

安塞网站建设公司创新互联,安塞网站设计制作,有大型网站制作公司丰富经验。已为安塞上千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的安塞做网站的公司定做!

具体内容如下

第一步,下载dropload插件,dropload插件下载地址 官方文档:https://github.com/ximan/dropload
第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的
第三步,将以下代码放到页面的最底部,注意是最底部,否则dropload插件获取不了高度

**基本代码结构**
//#content为某个div的id 
var dropload = $('#content').dropload({ 
//scrollArea很关键,要不然加载更多不起作用 
scrollArea : window, 
domUp : { 
 domClass : 'dropload-up', 
 domRefresh : '↓下拉刷新
',   domUpdate : '↑释放更新
',   domLoad : '加载中...
'  },  domDown : {   domClass : 'dropload-down',   domRefresh : '↑上拉加载更多
',   domLoad : '加载中...',   domNoData : '暂无数据'   },  loadUpFn : function(me){   //下拉刷新需要调用的函数   alert("下拉刷新需要调用的函数");   //重置下拉刷新   me.resetload();  },  loadDownFn : function(me){   //上拉加载更多需要调用的函数   alert("上拉加载更多需要调用的函数");   //定时器函数,为了看出上拉加载更多效果    setTimeout(function(){    // 每次数据加载完,必须重置     me.resetload();    },1000);    }  });

一些完整的例子 按需查看就好

示例一、加载底部

示例二、加载顶部、底部

示例三、多次加载

$(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 += ''
      +''
      +'

'+data.lists[i].title+'

'       +''+data.lists[i].date+''       +'';     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 : '↓下拉刷新',
  domUpdate : '↑释放更新',
  domLoad : '加载中...'
 },
 domDown : {
  domClass : 'dropload-down',
  domRefresh : '↑上拉加载更多',
  domLoad : '加载中...',
  domNoData : '暂无数据'
 },
 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 += ''
     +''
     +'

'+data.lists[i].title+'

'      +''+data.lists[i].date+''      +'';    }    // 为了测试,延迟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 += ''      +''      +'

'+data.lists[i].title+'

'      +''+data.lists[i].date+''      +'';    }    // 为了测试,延迟1秒加载    setTimeout(function(){    $('.lists').append(result);    // 每次数据加载完,必须重置    dropload.resetload();    },1000);   },   error: function(xhr, type){    alert('Ajax error!');    // 即使加载出错,也得重置    dropload.resetload();   }   });  }  }); });

以上是“dropload.js插件下拉刷新和上拉加载怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页标题:dropload.js插件下拉刷新和上拉加载怎么用
本文路径:http://azwzsj.com/article/gcpdhi.html