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();
默认滚动到底部会去请求ajax
参数说明：
url:请求的数据地址，不支持跨域（必须）
distance:距离底部多远加载（可选参数）
callback:当滚动到指定距离后请求完ajax将会触发这个回调函数，里面有两个参数，第一个为数据(以及转成json对象了，用的是json.parse，可能低版本浏览器不支持这个方法)，第二个参数为传进去的参数，当你需要重新改变请求信息的时候可以用这个，比如说你想做分页效果，就需要改变url地址。
callback(name1,name2)
name1:data
name2:配置
源代码：
<!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('ul'); for(var i=0;i<resp.data.length;i+=1){ oul.innerhtml+= '<li>'+ resp.data[i].title +'</li>'; } }}).isbottom(); </script> </body> </html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
更多原生js下拉加载插件分享。