js版上拉加载插件
文件大小：0.16MB下载：1129次
自己手写JS版上拉加载数据支持PC端和移动端，支持Vue、React、原生H5。
index.html文件中的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉加载数据</title>
<style>
.news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;}
.news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;}
</style>
</head>
<body>
<div id="news-wrap" class="news-wrap">
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
</div>
<script src="jquery.js"></script>
<script src="uprefresh.js"></script>
<script>
$(function(){
var oNewsWrap=$("#news-wrap");
var pullUp=new UpRefresh();
pullUp.init({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){
$.ajax({
type:"get",
url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments",
success:function(data){
var str='';
for(var i in data){
str+='<div class="list">'+data[i].name+'</div>'
}
oNewsWrap.append(str);
}
});
});
});
</script>
</body>
</html>
uprefresh.js代码示例：
/*eslint-disable*/
(function (global,document,factory) {
//这个判断支持模块化比如react和vue
if ( typeof module != 'undefined' && module.exports ) {
module.exports = factory(global,document);
} else if ( typeof define == 'function' && define.amd ) {
define( function () { return factory(global,document); } );
} else if(typeof global != "undefined") {
global.UpRefresh = factory(global,document);
}
})(window, document,function (global,document) {
var UpRefresh=function(){
this.fnScrollBottom=null;
this.eventScroll();
};
UpRefresh.prototype={
init:function(opts,callback){
if(opts instanceof Object) {
this.opts = opts;
this.iMaxPage=this.opts.maxPage;
this.fnCallback=callback;
this.iOffsetBottom=this.opts.offsetBottom;
this.iCurPage=this.opts.curPage;
}
},
eventScroll:function(){
var _this=this;
_this.fnScrollBottom=_this.scrollBottom().bind(this);
global.addEventListener("scroll",_this.fnScrollBottom,false);
},
uneventSrcoll:function(){
var _this=this;
global.removeEventListener("scroll",_this.fnScrollBottom,false);
},
scrollBottom:function(){
var _this=this;
var bScroll=true;
return function(){
if(!bScroll){
return;
}
bScroll=false;
var timer=null;
clearTimeout(timer);
timer = setTimeout(function(){
//整个页面滚动条的高度
var iScrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动到当前的距离
var iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//整个窗体的高度
var iWinHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
if(_this.iCurPage<_this.iMaxPage) {
_this.iCurPage++;
_this.fnCallback(_this.iCurPage);
}
}
bScroll=true;
},300);
}
}
};
return UpRefresh;
});
完整代码下载：
链接: https://pan.baidu.com/s/1i-K9X6oF2-3D71s3EmHldw 密码: dl1m 点击下载
index.html文件中的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉加载数据</title>
<style>
.news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;}
.news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;}
</style>
</head>
<body>
<div id="news-wrap" class="news-wrap">
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
</div>
<script src="jquery.js"></script>
<script src="uprefresh.js"></script>
<script>
$(function(){
var oNewsWrap=$("#news-wrap");
var pullUp=new UpRefresh();
pullUp.init({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){
$.ajax({
type:"get",
url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments",
success:function(data){
var str='';
for(var i in data){
str+='<div class="list">'+data[i].name+'</div>'
}
oNewsWrap.append(str);
}
});
});
});
</script>
</body>
</html>
uprefresh.js代码示例：
/*eslint-disable*/
(function (global,document,factory) {
//这个判断支持模块化比如react和vue
if ( typeof module != 'undefined' && module.exports ) {
module.exports = factory(global,document);
} else if ( typeof define == 'function' && define.amd ) {
define( function () { return factory(global,document); } );
} else if(typeof global != "undefined") {
global.UpRefresh = factory(global,document);
}
})(window, document,function (global,document) {
var UpRefresh=function(){
this.fnScrollBottom=null;
this.eventScroll();
};
UpRefresh.prototype={
init:function(opts,callback){
if(opts instanceof Object) {
this.opts = opts;
this.iMaxPage=this.opts.maxPage;
this.fnCallback=callback;
this.iOffsetBottom=this.opts.offsetBottom;
this.iCurPage=this.opts.curPage;
}
},
eventScroll:function(){
var _this=this;
_this.fnScrollBottom=_this.scrollBottom().bind(this);
global.addEventListener("scroll",_this.fnScrollBottom,false);
},
uneventSrcoll:function(){
var _this=this;
global.removeEventListener("scroll",_this.fnScrollBottom,false);
},
scrollBottom:function(){
var _this=this;
var bScroll=true;
return function(){
if(!bScroll){
return;
}
bScroll=false;
var timer=null;
clearTimeout(timer);
timer = setTimeout(function(){
//整个页面滚动条的高度
var iScrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动到当前的距离
var iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//整个窗体的高度
var iWinHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
if(_this.iCurPage<_this.iMaxPage) {
_this.iCurPage++;
_this.fnCallback(_this.iCurPage);
}
}
bScroll=true;
},300);
}
}
};
return UpRefresh;
});
完整代码下载：
链接: https://pan.baidu.com/s/1i-K9X6oF2-3D71s3EmHldw 密码: dl1m 点击下载