Native JS drop-down loading plug-in sharing-JS Tutorial-php.cn

Native JS drop-down loading plug-in sharing

高洛峰

Release： 2017-01-10 10:55:35

Original

1483 people have browsed it

Usage:

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

Copy after login

Native JS drop-down loading plug-in sharing

By default, scrolling to the bottom will request ajax

Parameter description:

url: Requested data address, does not support cross-domain (required)

distance: How far from the bottom to load (optional parameter)

callback: when scrolling to the specified After the ajax request is completed, this callback function will be triggered. There are two parameters in it. The first one is data (and converted into a JSON object, using JSON.parse. This method may not be supported by lower version browsers). The two parameters are the parameters passed in. You can use this when you need to change the request information. For example, if you want to have a paging effect, you need to change the url address.

callback(name1,name2)

name1:data

name2:configuration

Native JS drop-down loading plug-in sharing

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>

Copy after login

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more native JS drop-down loading plug-in sharing related articles, please pay attention to the PHP Chinese website!