原生JS下拉加载插件分享


Posted in Javascript onDecember 26, 2016

使用方式:

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

原生JS下拉加载插件分享

原生JS下拉加载插件分享

默认滚动到底部会去请求ajax

参数说明:

url:请求的数据地址,不支持跨域(必须)

distance:距离底部多远加载(可选参数)

callback:当滚动到指定距离后请求完ajax将会触发这个回调函数,里面有两个参数,第一个为数据(以及转成JSON对象了,用的是JSON.parse,可能低版本浏览器不支持这个方法),第二个参数为传进去的参数,当你需要重新改变请求信息的时候可以用这个,比如说你想做分页效果,就需要改变url地址。

callback(name1,name2)

name1:data

name2:配置

原生JS下拉加载插件分享

源代码:

<!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 = {
  // 判断是否到达底部
  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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
js面向对象的写法
Feb 19 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 #Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 #Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 #Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
js模糊查询实例分享
Dec 26 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP的PSR规范中文版
2013/09/28 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python切片操作深入详解
2018/07/27 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
企业出纳岗位职责
2014/03/12 职场文书
科学发展观演讲稿
2014/09/11 职场文书
研讨会通知
2015/04/27 职场文书
运动会加油稿30字
2015/07/21 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技