ネイティブ JS ドロップダウン読み込みプラグイン共有

高洛峰
リリース: 2017-01-10 10:55:35
オリジナル
1466 人が閲覧しました

使用法:

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

ネイティブ JS ドロップダウン読み込みプラグイン共有

デフォルトでは、一番下までスクロールするとajaxが要求されます

パラメータの説明:

url: 要求されたデータアドレス、クロスドメインはサポートされていません(必須)

距離: 方法読み込み中 (オプションのパラメーター)

callback: 指定された距離までスクロールした後に ajax リクエストが完了すると、このコールバック関数がトリガーされます。最初のパラメーターは data (そして に変換されます) です。 JSON.parse を使用した JSON オブジェクト (以前のバージョンのブラウザではこのメソッドがサポートされていない可能性があります)、2 番目のパラメータは渡されるパラメータです。たとえば、リクエスト情報を変更する必要がある場合にこれを使用できます。ページング効果がある場合は、URL アドレスを変更する必要があります。

callback(name1,name2)

name1:data

name2:configuration

ネイティブ JS ドロップダウン読み込みプラグイン共有

Source code:

<!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>
ログイン後にコピー

以上がこの記事の全内容です、この記事の内容が何かの役に立てば幸いです。あなたの勉強や仕事に役立つように、PHP中国語ウェブサイトもサポートしたいと思っています。

ネイティブ JS ドロップダウン読み込みプラグインの共有関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート