原生JS下拉加载插件分享

作者：追梦子时间：2024-04-29 13:42:35　

使用方式：

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>

来源：http://www.cnblogs.com/pssp/p/5925903.html

标签：原生JS,下拉,加载

投稿

原生JS下拉加载插件分享

猜你喜欢

css学习笔记：表格隔行点击变色

Python进度条tqdm的用法详解

Vue+ElementUI实现表单动态渲染、可视化配置的方法

display:inline-block的深入理解

mysql存储过程实例

Python with语句上下文管理器两种实现方法分析

Pandas 中的join函数应用实现删除多余的空行

解决IIS出现Active Server Pages错误“ASP 0201”

为ckeditor编辑器加上传图片的功能

es6函数之严格模式用法实例分析

Matplotlib绘制子图的常见几种方法

Python队列RabbitMQ 使用方法实例记录

Python 多线程超详细到位总结

Mysql排序和分页(order by&limit)及存在的坑

python实现简单http服务器功能

python离散建模之感知器学习算法

Pycharm代码无法复制,无法选中删除,无法编辑的解决方法

mysql 8.0.16 压缩包安装配置方法图文教程

进一步理解Python中的函数编程

python实现二叉树的遍历