Heim > Artikel > Web-Frontend > Native JS-Dropdown-Lade-Plug-In-Freigabe

Native JS-Dropdown-Lade-Plug-In-Freigabe

高洛峰Original: 2017-01-10 10:55:351454Durchsuche

Verwendung:

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();

Standardmäßig wird beim Scrollen nach unten der Ajax

Parameterbeschreibung:

URL: angeforderte Datenadresse, unterstützt nicht domänenübergreifend (erforderlich)

Entfernung: wie weit von unten geladen werden soll (optionaler Parameter)

Rückruf: Beim Scrollen löst die Ajax-Anfrage diese Rückruffunktion aus. Der erste ist Daten (und wird in ein JSON-Objekt konvertiert. JSON.parse wird verwendet. Niedrigere Versionsbrowser können verwendet werden Diese Methode wird nicht unterstützt. Der zweite Parameter ist der übergebene Parameter. Sie können ihn verwenden, wenn Sie die Anforderungsinformationen ändern müssen. Wenn Sie beispielsweise den Paging-Effekt ausführen möchten, müssen Sie die URL-Adresse ändern.

callback(name1,name2)

name1:data

name2:configuration

Native JS-Dropdown-Lade-Plug-In-Freigabe

Quellcode:

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die chinesische PHP-Website zu unterstützen.

Weitere Artikel zum Thema native JS-Dropdown-Lade-Plug-In-Freigabe finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS-Implementierungsmethode zum Abrufen der Werte mehrerer Eingabefelder mit demselben NamenNächster Artikel：JS-Implementierungsmethode zum Abrufen der Werte mehrerer Eingabefelder mit demselben Namen

In Verbindung stehende Artikel

Mehr sehen