네이티브 JS 드롭다운 로딩 플러그인 공유
- 高洛峰원래의
- 2017-01-10 10:55:351410검색
사용법:
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: 요청한 데이터 주소, 크로스 도메인을 지원하지 않음(필수)
거리: 하단에서 로드할 거리(선택 매개변수)
콜백: 스크롤할 때 지정된 거리에 도달한 후 ajax 요청이 이 콜백 함수를 트리거합니다. 여기에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 데이터(JSON 객체로 변환됩니다. JSON.parse가 사용됩니다. 하위 버전의 브라우저는 이 메소드는 지원하지 않음) 두 번째 매개변수는 전달되는 매개변수입니다. 요청 정보를 변경해야 할 때 이를 사용할 수 있습니다. 예를 들어 페이징 효과를 적용하려면 URL 주소를 변경해야 합니다.
callback(name1,name2)
name1:data
name2:configuration
소스 코드:
<!DOCTYPE html>
<html>
<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>이상은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 저도 PHP 중국어 사이트에 지원하고 싶습니다!
더 많은 네이티브 JS 드롭다운 로딩 플러그인 공유 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.