【无限滚动加载数据】—infinite-scroll插件的使用

来源：互联网发布：淘宝二手钢琴编辑：程序博客网时间：2024/05/18 01:42

一.无限滚动概念

首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。

二.探讨infinite-scroll

1.从网页头引入两个js文件，注意必须先放jquery的

[javascript] view plaincopy

<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>

2.之后在网页头自己写一个js脚本

[javascript] view plaincopy

<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
</script>

3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>infinitescroll</title>
<script type="text/javascript"
src="${pageContext.request.contextPath }/javascript/lib/jquery/core/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/javascript/lib/infinitescroll/jquery.infinitescroll.dev.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //导航的选择器，会被隐藏
nextSelector: "#navigation a", //包含下一页链接的选择器（分页时跳转的url）
itemSelector: ".scroll " , //你将要取回的选项(内容块)(返回的数据放在这个div里面)
animate: true, //启用调试信息
maxPage: 30, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function() {
alert('error');
}, //当出错的时候，比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面，默认为false
dataType: 'json',//可以是json
template: function(data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
//alert(data);
console.debug(data);//将json转成html并返回
return '<input type="text" value="ahhh" />';
},
loading: {
msgText: "加载中...",
finishedMsg: '没有新数据了...',
selector: '.loading' // 显示loading信息的div
}
}, function(newElems) {
//程序执行完的回调函数
var $newElems = $(newElems);
$('.wrapper:eq(1)').masonry('appended', $newElems);
});
});
</script>

</head>
<body>
<div id="container">

<div class="scroll">

第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容第一页内容第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br> 第一页内容<br>第一页内容<br>第一页内容<br>

</div>
</div>
<div id="navigation" align="center">

<a href="${pageContext.request.contextPath }/user/pageTest?page=1"></a>

</div>
<div class="loading">
<img src="${pageContext.request.contextPath }/images/loading_bar.gif"><span>正在加载...</span>
</div>
</body>
</html>

三.细微部分

1.js函数里还可定义的其他属性:

[javascript] view plaincopy
debug        : true,                                         //用于调试，如果需要用到，只需在网页头引入官网demo里的debug.js文件                  
loadingImg   : "/img/loading.gif",                   //加载时候显示的进度条，用户可以自定义       
loadingText  : "Loading new posts...",            //加载时显示的文字     
extraScrollPx: 50,                                            //离网页底部多少像素时触发ajax  
donetext     : "I think we've hit the end, Jim" ,     //加载完数据(到达底部时)显示的文字提醒  
errorCallback: function(){},                             //加载完数据后的回调函数，可选                

其他属性暂不作过多介绍

2.数据的载入方式

①html ：如果你已经有固定的数据块，可以放到html里面加载静态页面。

②json ：可以用后台返回json的方式，返回的时候要指定temple里面的html模版，否则会出错。

③我上面例子用的其实也是json，前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。（个人习惯）