네이티브 JS 드롭다운 로딩 플러그인 공유-JS 튜토리얼-php.cn

네이티브 JS 드롭다운 로딩 플러그인 공유

高洛峰

풀어 주다： 2017-01-10 10:55:35

원래의

1482명이 탐색했습니다.

사용법:

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

로그인 후 복사

네이티브 JS 드롭다운 로딩 플러그인 공유

기본적으로 아래로 스크롤하면 ajax가 요청됩니다.

매개변수 설명:

url: 요청한 데이터 주소, 크로스 도메인을 지원하지 않음(필수)

거리: 하단에서 로드할 거리(선택 매개변수)

콜백: 스크롤할 때 지정된 거리에 도달한 후 ajax 요청이 이 콜백 함수를 트리거합니다. 여기에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 데이터(JSON 객체로 변환됩니다. JSON.parse가 사용됩니다. 하위 버전의 브라우저는 이 메소드는 지원하지 않음) 두 번째 매개변수는 전달되는 매개변수입니다. 요청 정보를 변경해야 할 때 이를 사용할 수 있습니다. 예를 들어 페이징 효과를 적용하려면 URL 주소를 변경해야 합니다.

callback(name1,name2)

name1:data

name2:configuration

네이티브 JS 드롭다운 로딩 플러그인 공유

소스 코드:

<!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 중국어 웹사이트를 주목하세요!