Partage de plug-ins de chargement par liste déroulante JS native-js tutoriel-php.cn

Partage de plug-ins de chargement par liste déroulante JS native

高洛峰

Libérer： 2017-01-10 10:55:35

original

1487 Les gens l'ont consulté

Utilisation :

new downUpData({url:"http://192.168.1.103:8080/test/
data.json",distance:20,callback:function(resp,config){
 var oUl = document.getElementById(&#39;ul&#39;);
 for(var i=0;i<resp.data.length;i+=1){
 oUl.innerHTML+= &#39;<li>&#39;+ resp.data[i].title +&#39;</li>&#39;;
 }
}}).isBottom();

Copier après la connexion

Partage de plug-ins de chargement par liste déroulante JS native

Par défaut, faire défiler vers le bas demandera l'ajax

Description du paramètre :

url : adresse de données demandée, ne prend pas en charge le cross-domain (obligatoire)

distance : à quelle distance du bas charger (paramètre facultatif)

callback : lors du défilement Après avoir atteint la distance spécifiée, la requête ajax déclenchera cette fonction de rappel. Elle contient deux paramètres. Le premier est des données (et converties en un objet JSON. JSON.parse est utilisé. Les navigateurs de version inférieure peuvent. ne prend pas en charge cette méthode), le deuxième paramètre est le paramètre transmis. Vous pouvez l'utiliser lorsque vous devez modifier les informations de la demande. Par exemple, si vous souhaitez effectuer l'effet de pagination, vous devez modifier l'adresse URL.

callback(name1,name2)

name1:data

name2:configuration

Partage de plug-ins de chargement par liste déroulante JS native

Code source :

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 body,ul{
  margin:0;
  padding:0;
 }
 </style>
</head>
<body>
 <ul id="ul">
 </ul>
 <script>
 function downUpData(obj){
  this.config = obj;
 };
 downUpData.prototype = {
  // 判断是否到达底部
  isBottom:function(){
  var _this = this;
  var scrollH = null,
   clientHeight = null;
   scrollTop = null;
   distance = this.config.distance||0;
   h = 0;
  function scroll(){
   scrollH = document.body.scrollHeight||document.documentElement.scrollHeight;
   clientHeight = window.innerHeight;
   scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
   h = clientHeight + scrollTop;
   if(h>=scrollH-distance){
   _this.ajax();
   }
  }
  scroll();
 
  window.onscroll = function(){
   scroll();
  };
  },
  // 发送AJAX请求
  ajax:function(){
  var _this = this;
  var xhr = null;
  if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
  }else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  xhr.open("GET",this.config.url,true);
  xhr.onreadystatechange = function(){
   if(xhr.readyState==4&&xhr.status==200){
   _this.config.callback(JSON.parse(xhr.responseText),_this.config);
   }
  }
  xhr.send();
  }
 };
 
 new downUpData({url:"http://192.168.1.103:8080/test/data.json",distance:20,callback:function(resp,config){
  console.log(config)
  var oUl = document.getElementById(&#39;ul&#39;);
  for(var i=0;i<resp.data.length;i+=1){
  oUl.innerHTML+= &#39;<li>&#39;+ resp.data[i].title +&#39;</li>&#39;;
  }
 }}).isBottom();
 </script>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou au travail de chacun. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles sur le partage de plug-ins de chargement déroulant JS natif, veuillez faire attention au site Web PHP chinois !