原生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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
Vue实现多页签组件
Jan 14 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
PyQt5实现下载进度条效果
2018/04/19 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python创建学生管理系统
2019/11/22 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
无故旷工检讨书
2014/01/26 职场文书
自荐信的基本格式
2014/02/22 职场文书
新党章心得体会
2014/09/04 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
redis 查看所有的key方式
2021/05/07 Redis