【无限滚动加载数据】—infinite-scroll插件的使用
2013-07-29 15:14
771 查看
一.无限滚动概念
首先,它是基于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>
<!-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
</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格式的字符串返回前台。(个人习惯)
相关文章推荐
- 【无限滚动加载数据】—infinite-scroll插件的使用
- infinite-scroll插件无限滚动加载数据的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- 【无限滚动加载数据】—infinite-scroll插件的使用
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
- 使用infinite-scroll实现Ghost博文列表的滚动加载
- 使用vue-infinite-scroll实现无限滚动效果
- vue滚动加载插件vue-infinite-scroll
- jquery.infinitescroll无限加载插件
- vue学习第25天,数据排序 分页 使用滚动加载插件
- 无限滚动插件infinite-scroll介绍
- jquery滚动条插件slimScroll的使用方法总结
- 使用jquery实现网页滚动加载数据且增加来新数据提醒功能
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- ng中infinite-scroll插件无限请求问题解决方法