原生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搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
JS实现鼠标移动拖尾
Dec 27 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与SQL注入攻击[二]
2007/04/17 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python读大数据txt
2016/03/28 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python基础之入门必看操作
2017/07/26 Python
python opencv之SURF算法示例
2018/02/24 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
新手学python应该下哪个版本
2020/06/11 Python
python如何查看安装了的模块
2020/06/23 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
摄影展策划方案
2014/06/02 职场文书
小学生运动会报道稿
2014/09/12 职场文书
学校捐书倡议书
2015/04/27 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
工作简报范文
2015/07/21 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技