原生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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
Element Backtop回到顶部的具体使用
Jul 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
单位速度在实战中的运用
2020/03/04 星际争霸
Smarty变量调节器失效的解决办法
2014/08/20 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
python基础教程之对象和类的实际运用
2014/08/29 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
浅谈Python基础—判断和循环
2019/03/22 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
学校安全管理责任书
2014/07/23 职场文书
武夷山导游词
2015/02/03 职场文书
元旦主持词开场白
2015/05/29 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang