jquery开发无限滚动加载插件教程附源码
日期：2018-03-14
来源：程序思维浏览：2139次
现在网上的无限滚动加载插件很多，但是他们是如何制作的呢？用到了什么技术？现在就让我来给大家揭晓一下吧：
思路解析：
1、监听滚动条是否到了页面最底部。
2、到了页面最底部后当前的页码加1。
3、将页面传递给url的页码参数里再获取数据。
下面的代码主要实现以上三步：
服务端的URL地址：http://jsonplaceholder.typicode.com/posts/1/comments
1、index.html页面代码
思路解析：
1、监听滚动条是否到了页面最底部。
2、到了页面最底部后当前的页码加1。
3、将页面传递给url的页码参数里再获取数据。
下面的代码主要实现以上三步：
服务端的URL地址：http://jsonplaceholder.typicode.com/posts/1/comments
1、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");
oNewsWrap.uprefresh({"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(i in data){
str+='<div class="list">'+data[i].name+'</div>'
}
oNewsWrap.append(str);
}
});
});
});
</script>
</body>
</html>
2、uprefresh.js代码
2、uprefresh.js代码
+function($){'use strict';
var UpRefresh=function(opts,callback){
if(opts instanceof Object) {
this.opts = opts;
this.iMaxPage=this.opts.maxPage;
this.oWin=$(window);
this.fnCallback=callback;
this.oHtml=$("html");
this.iOffsetBottom=this.opts.offsetBottom;
this.iCurPage=this.opts.curPage;
this.init();
}
};
UpRefresh.prototype={
init:function(){
var _this=this;
_this.eventScroll();
},
eventScroll:function(){
var _this=this;
_this.oWin.on("scroll",_this.scrollBottom());
},
scrollBottom:function(){//函数节流检测是否到了最底部
var _this=this;
var bScroll=true;
return function(){
if(!bScroll){
return;
}
bScroll=false;
setTimeout(function(){
var iScrollHeight=$(document).innerHeight();//获取滚轮页面的高
var iScrollTop=_this.oWin.scrollTop();//获取滚动条到哪里的高
var iWinHeight=_this.oWin.height();//获取当前页面第一屏的高
if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
if(_this.iCurPage<_this.iMaxPage) {
//console.log("scrollHeight:"+iScrollHeight+",winHeight:"+(parseInt(iScrollTop)+parseInt(iWinHeight)));
_this.iCurPage++;
//console.log(_this.iCurPage);
_this.fnCallback(_this.iCurPage);//利用回调函数将页码发送到index.html里面
}
}
bScroll=true;
},600);
}
}
};
$.fn.uprefresh=function(opts,callback){
return new UpRefresh(opts,callback);
}
精品好课
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...