原生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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
use jscript with List Proxy Server Information
Jun 11 Javascript
网上应用的一个不错common.js脚本
Aug 08 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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
ADODB类使用
2006/11/25 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python修改字典键(key)的方法
2019/08/05 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
如何理解Python中包的引入
2020/05/29 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
美工的岗位职责
2013/11/14 职场文书
欢迎家长标语
2014/10/08 职场文书
英文产品推荐信
2015/03/27 职场文书
边城读书笔记
2015/06/29 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书