快捷導(dǎo)航

原生JS下拉加載插件分享

更新時(shí)間：2016年12月26日 11:04:28 作者：追夢(mèng)子

本文主要分享了原生JS下拉加載插件的實(shí)現(xiàn)代碼。具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧

使用方式：

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+= '<li>'+ resp.data[i].title +'</li>';
 }
}}).isBottom();

默認(rèn)滾動(dòng)到底部會(huì)去請(qǐng)求ajax

參數(shù)說(shuō)明：

url:請(qǐng)求的數(shù)據(jù)地址，不支持跨域（必須）

distance:距離底部多遠(yuǎn)加載（可選參數(shù)）

callback:當(dāng)滾動(dòng)到指定距離后請(qǐng)求完ajax將會(huì)觸發(fā)這個(gè)回調(diào)函數(shù)，里面有兩個(gè)參數(shù)，第一個(gè)為數(shù)據(jù)(以及轉(zhuǎn)成JSON對(duì)象了，用的是JSON.parse，可能低版本瀏覽器不支持這個(gè)方法)，第二個(gè)參數(shù)為傳進(jìn)去的參數(shù)，當(dāng)你需要重新改變請(qǐng)求信息的時(shí)候可以用這個(gè)，比如說(shuō)你想做分頁(yè)效果，就需要改變url地址。

callback(name1,name2)

name1:data

name2:配置

源代碼：

<!DOCTYPE html>
<html lang="en">
<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 = {
  // 判斷是否到達(dá)底部
  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();
  };
  },
  // 發(fā)送AJAX請(qǐng)求
  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('ul');
  for(var i=0;i<resp.data.length;i+=1){
  oUl.innerHTML+= '<li>'+ resp.data[i].title +'</li>';
  }
 }}).isBottom();
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: