原生JS下拉加载插件分享_网络技术_宿州市腾雀网络科技有限公司

原生JS下拉加载插件分享

发布时间 - 2026-01-10 22:06:58 点击率：次

使用方式：

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();

默认滚动到底部会去请求ajax

参数说明：

url:请求的数据地址，不支持跨域（必须）

distance:距离底部多远加载（可选参数）

callback:当滚动到指定距离后请求完ajax将会触发这个回调函数，里面有两个参数，第一个为数据(以及转成JSON对象了，用的是JSON.parse，可能低版本浏览器不支持这个方法)，第二个参数为传进去的参数，当你需要重新改变请求信息的时候可以用这个，比如说你想做分页效果，就需要改变url地址。

callback(name1,name2)

name1:data

name2:配置

源代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 原生JS # 下拉 # 加载 # 原生JS封装Ajax插件(同域、jsonp跨域) # 原生JS实现旋转木马式图片轮播插件 # 原生js实现autocomplete插件 # 原生js编写autoComplete插件 # 轻量级的原生js日历插件calendar.js使用指南 # 原生Javascript插件开发实践 # 不支持 # 的是 # 第一个 # 将会 # 多远 # 可以用 # 当你 # 第二个 # 分页 # 说你 # 可选 # 会去 # 想做 # 回调 # 转成 # 源代码 # 版本浏览器 # 判断是否 # 有两个

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Swoole如何做服务拆分？拆分策略有哪些？

下一篇：综合网站制作表格怎么做,怎样制作网页表格？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Swoole如何做服务拆分？拆分策略有哪些？

下一篇：综合网站制作表格怎么做,怎样制作网页表格？