recherche

Maison >interface Web >js tutoriel >méthodes d'actualisation déroulante et de chargement du plug-in dropload.js

méthodes d'actualisation déroulante et de chargement du plug-in dropload.js

小云云
小云云original
2018-05-14 17:18:362777parcourir

Cet article présente principalement en détail l'utilisation de l'actualisation déroulante du plug-in dropload.js et du chargement par extraction. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

La première étape, téléchargez le plug-in dropload, le document officiel de l'adresse de téléchargement du plug-in dropload : https://github.com/ximan/dropload
La deuxième étape , introduisez les fichiers dropload.css et dropload.min.js dans le plug-in dropload téléchargé dans la page. Attention à introduire également Jquery1.7 ou supérieur ou Zepto. Ne les citez pas. les deux en même temps, car dropload est implémenté sur la base de jquery
La troisième étape, mettez le code suivant tout en bas de la page, faites attention tout en bas, sinon le plug dropload. -in ne pourra pas obtenir la hauteur 

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

Voir quelques exemples complets sur demande Tout comme

Exemple 1, Charger le bas

<script>
$(function(){
 // 页数
 var page = 0;
 // 每页展示5个
 var size = 5;

 // dropload调用
 $(&#39;.content&#39;).dropload({
 scrollArea : window,
 loadDownFn : function(me){
  page++;
  // 拼接HTML
  var result = &#39;&#39;;
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,//配合后台接口
  dataType: &#39;json&#39;,
  success: function(data){
   var arrLen = data.length;
   if(arrLen > 0){
   for(var i=0; i<arrLen; i++){
    result += &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 如果没有数据
   }else{
   // 锁定
   me.lock();
   // 无数据
   me.noData();
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   // 插入数据到页面，放到最后面
   $(&#39;.lists&#39;).append(result);
   // 每次数据插入，必须重置
   me.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 }
 });
});
</script>

Exemple 2, Charger le haut, le bas

<script>
$(function(){
 // 页数
 var page = 0;
 // 每页展示10个
 var size = 10;

 // dropload
 $(&#39;.content&#39;).dropload({
 scrollArea : window,
 domUp : {
  domClass : &#39;dropload-up&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新-自定义内容</p>&#39;,
  domUpdate : &#39;<p class="dropload-update">↑释放更新-自定义内容</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;
 },
 domDown : {
  domClass : &#39;dropload-down&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;,
  domNoData : &#39;<p class="dropload-noData">暂无数据-自定义内容</p>&#39;
 },
 loadUpFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/update.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).html(result);
   // 每次数据加载完，必须重置
   me.resetload();
   // 重置页数，重新获取loadDownFn的数据
   page = 0;
   // 解锁loadDownFn里锁定的情况
   me.unlock();
   me.noData(false);
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 },
 loadDownFn : function(me){
  page++;
  // 拼接HTML
  var result = &#39;&#39;;
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,
  dataType: &#39;json&#39;,
  success: function(data){
   var arrLen = data.length;
   if(arrLen > 0){
   for(var i=0; i<arrLen; i++){
    result += &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 如果没有数据
   }else{
   // 锁定
   me.lock();
   // 无数据
   me.noData();
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   // 插入数据到页面，放到最后面
   $(&#39;.lists&#39;).append(result);
   // 每次数据插入，必须重置
   me.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   me.resetload();
  }
  });
 },
 threshold : 50
 });
});
</script>

Exemple trois, Charger plusieurs fois

$(function(){
 //利用此写法，可以限制多次加载的个数。
 var timer;

 $(&#39;.header .ipt&#39;).on(&#39;input&#39;,function(){
 var _length = $(this).val();
 // 如果输入值不是数字或者是空，就跳出
 if(isNaN(_length) || _length === &#39;&#39;){
  return false;
 }
 clearTimeout(timer);
 timer = setTimeout(function(){//也可不用定时器
  // 清空内容
  $(&#39;.lists&#39;).html(&#39;&#39;);
  $(&#39;.dropload-down&#39;).remove();

  var counter = 0;
  // 每页展示4个
  var num = 4;
  var pageStart = 0,pageEnd = 0;
  // dropload
  $(&#39;.content&#39;).dropload({
  scrollArea : window,
  loadDownFn : function(me){
   $.ajax({
   type: &#39;GET&#39;,
   url: &#39;json/more.json&#39;,
   dataType: &#39;json&#39;,
   success: function(data){
    var result = &#39;&#39;;
    counter++;
    pageEnd = num * counter;
    pageStart = pageEnd - num;

    for(var i = pageStart; i < pageEnd; i++){
    result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
      +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
      +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
      +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
      +&#39;</a>&#39;;
    if((i + 1) >= _length || (i + 1) >= data.lists.length){
     // 锁定
     me.lock();
     // 无数据
     me.noData();
     break;
    }
    }
    // 为了测试，延迟1秒加载
    setTimeout(function(){
    $(&#39;.lists&#39;).append(result);
    // 每次数据加载完，必须重置
    me.resetload();
    },1000);
   },
   error: function(xhr, type){
    alert(&#39;Ajax error!&#39;);
    // 即使加载出错，也得重置
    me.resetload();
   }
   });
  }
  });
 },500);
 });

Exemple quatre, Mise en page fixe, chargement en haut et en bas

$(function(){
 // 按钮操作
 $(&#39;.header .btn&#39;).on(&#39;click&#39;,function(){
 var $this = $(this);
 if(!!$this.hasClass(&#39;lock&#39;)){
  $this.attr(&#39;class&#39;,&#39;btn unlock&#39;);
  $this.text(&#39;解锁&#39;);
  // 锁定
  dropload.lock();
  $(&#39;.dropload-down&#39;).hide();
 }else{
  $this.attr(&#39;class&#39;,&#39;btn lock&#39;);
  $this.text(&#39;锁定&#39;);
  // 解锁
  dropload.unlock();
  $(&#39;.dropload-down&#39;).show();
 }
 });

 // dropload
 var dropload = $(&#39;.inner&#39;).dropload({
 domUp : {
  domClass : &#39;dropload-up&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,
  domUpdate : &#39;<p class="dropload-update">↑释放更新</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;
 },
 domDown : {
  domClass : &#39;dropload-down&#39;,
  domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,
  domLoad : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,
  domNoData : &#39;<p class="dropload-noData">暂无数据</p>&#39;
 },
 loadUpFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/update.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).html(result);
   // 每次数据加载完，必须重置
   dropload.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   dropload.resetload();
  }
  });
 },
 loadDownFn : function(me){
  $.ajax({
  type: &#39;GET&#39;,
  url: &#39;json/more.json&#39;,
  dataType: &#39;json&#39;,
  success: function(data){
   var result = &#39;&#39;;
   for(var i = 0; i < data.lists.length; i++){
   result += &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
     +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
     +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
     +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
     +&#39;</a>&#39;;
   }
   // 为了测试，延迟1秒加载
   setTimeout(function(){
   $(&#39;.lists&#39;).append(result);
   // 每次数据加载完，必须重置
   dropload.resetload();
   },1000);
  },
  error: function(xhr, type){
   alert(&#39;Ajax error!&#39;);
   // 即使加载出错，也得重置
   dropload.resetload();
  }
  });
 }
 });
});

Recommandations associées :

À propos de l'utilisation de dropload.js

Une explication détaillée du processus d'encapsulation de mui pull-up pour charger plus de données d'actualisation déroulante

Analyse de la méthode de mise en œuvre de l'actualisation déroulante et Chargement pull-up de la liste des applets WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css 封装 JS github 微信小程序 https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des objets d'instance vue.js et des instances d'arborescence de composantsArticle suivant：Explication détaillée des objets d'instance vue.js et des instances d'arborescence de composants

Articles Liés

Voir plus