UDN-企业互联网技术人气社区

板块导航

浏览  : 382
回复  : 7

[原生js] 原生JS下拉加载插件分享

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 14:25:14 | 显示全部楼层 |阅读模式
  本文主要分享了原生JS下拉加载插件的实现代码。具有一定的参考价值,需要的朋友一起来看下吧

  使用方式:
  1. new downUpData({url:"http://192.168.1.103:8080/test/
  2. data.json",distance:20,callback:function(resp,config){
  3. var oUl = document.getElementById('ul');
  4. for(var i=0;i<resp.data.length;i+=1){
  5. oUl.innerHTML+= '<li>'+ resp.data[i].title +'</li>';
  6. }
  7. }}).isBottom();
复制代码


2016122611042022.png
2016122611042023.png

  默认滚动到底部会去请求ajax
  
  参数说明:
  
  url:请求的数据地址,不支持跨域(必须)
  
  distance:距离底部多远加载(可选参数)
  
  callback:当滚动到指定距离后请求完ajax将会触发这个回调函数,里面有两个参数,第一个为数据(以及转成JSON对象了,用的是JSON.parse,可能低版本浏览器不支持这个方法),第二个参数为传进去的参数,当你需要重新改变请求信息的时候可以用这个,比如说你想做分页效果,就需要改变url地址。
  
  callback(name1,name2)
  
  name1:data
  
  name2:配置
2016122611042024.png
  
  源代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. body,ul{
  9.   margin:0;
  10.   padding:0;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <ul id="ul">
  16. </ul>
  17. <script>
  18. function downUpData(obj){
  19.   this.config = obj;
  20. };
  21. downUpData.prototype = {
  22.   // 判断是否到达底部
  23.   isBottom:function(){
  24.   var _this = this;
  25.   var scrollH = null,
  26.    clientHeight = null;
  27.    scrollTop = null;
  28.    distance = this.config.distance||0;
  29.    h = 0;
  30.   function scroll(){
  31.    scrollH = document.body.scrollHeight||document.documentElement.scrollHeight;
  32.    clientHeight = window.innerHeight;
  33.    scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
  34.    h = clientHeight + scrollTop;
  35.    if(h>=scrollH-distance){
  36.    _this.ajax();
  37.    }
  38.   }
  39.   scroll();

  40.   window.onscroll = function(){
  41.    scroll();
  42.   };
  43.   },
  44.   // 发送AJAX请求
  45.   ajax:function(){
  46.   var _this = this;
  47.   var xhr = null;
  48.   if(window.XMLHttpRequest){
  49.    xhr = new XMLHttpRequest();
  50.   }else{
  51.    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  52.   }

  53.   xhr.open("GET",this.config.url,true);
  54.   xhr.onreadystatechange = function(){
  55.    if(xhr.readyState==4&&xhr.status==200){
  56.    _this.config.callback(JSON.parse(xhr.responseText),_this.config);
  57.    }
  58.   }
  59.   xhr.send();
  60.   }
  61. };

  62. new downUpData({url:"http://192.168.1.103:8080/test/data.json",distance:20,callback:function(resp,config){
  63.   console.log(config)
  64.   var oUl = document.getElementById('ul');
  65.   for(var i=0;i<resp.data.length;i+=1){
  66.   oUl.innerHTML+= '<li>'+ resp.data[i].title +'</li>';
  67.   }
  68. }}).isBottom();
  69. </script>
  70. </body>
  71. </html>
复制代码

  以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
  
  原文链接:http://www.cnblogs.com/pssp/p/5925903.html
发表于 2017-1-10 14:25:43 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2017-1-10 14:25:43 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-10 14:25:44 来自手机 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

发表于 2017-1-10 14:25:45 | 显示全部楼层
经常看到”饼干妹妹“发帖,辛苦了
使用道具 举报

回复

发表于 2017-1-10 15:20:43 | 显示全部楼层
学习
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部