【⽆限滚动加载数据】—infinite-scroll插件的使⽤
⽹上对于infinite-scroll插件使⽤的例⼦不多。但由于它的出现，⿎吹了瀑布流形式的页⾯展⽰⽅式，所以不得不了解了解这种新的分页⽅式。
上有对infinite-scroll的详细描述，但⼀般⼈即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例⼦供⼤家借鉴。⼀.⽆限滚动概念
⾸先，它是基于Jquery的，另外还要明⽩⽆限滚动的概念：⽆限滚动的实现原理就是当你在⽹页上的滚动条滚动到离⽹页底部⼀定长度的时候，触发某ajax函数（infinite-scroll内已经封装好），往后台加载⽂件或者数据，⼜或者从外部引⼊静态html形式⽂件。
⼆.探讨infinite-scroll
1.从⽹页头引⼊两个js⽂件，注意必须先放jquery的
[javascript]
1. <script src="css/infinite-scroll/jquery-1.6.4.js"></script>
2. <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在⽹页头⾃⼰写⼀个js脚本
[javascript]
1. <script>
2. $(document).ready(function (){
3. $("#container").infinitescroll({
4. navSelector: "#navigation", //页⾯分页元素--本页的导航，意思就是⼀个可以触发ajax函数的模块
5. nextSelector: "#navigation a", //下⼀页的导航
6. itemSelector: ".scroll " , //此处我⽤了类选择器，选择的是你要加载的那⼀个块（每次载⼊的数据放的地⽅）
7. animate: true, //加载时候时候需要动画，默认是false
8. maxPage: 3, //最⼤的页数，也就是滚动多少次停。这个页码必须得要你从数
据库⾥⾯拿
9. });
10. });
11. </script>
3.或许你看到这⾥还是不太清楚⽹页怎么定义，这⾥给出我的demo，希望可以有帮助
[html]
1. <%@ page language="java" contentType="text/html; charset=utf-8"
2. pageEncoding="utf-8"%>
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <title>⽆限翻页效果</title>
8. <script src="css/infinite-scroll/jquery-1.6.4.js"></script>
9. <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
10. <script src="css/infinite-scroll/test/debug.js"></script>
11. <script>
12. $(document).ready(function (){ //别忘了加这句，除⾮你没学Jquery
13. $("#container").infinitescroll({jquery滚动条滚动到底部
14. navSelector: "#navigation", //页⾯分页元素--成功后⾃动隐藏
15. nextSelector: "#navigation a",
16. itemSelector: ".scroll " ,
17. animate: true,
18. maxPage: 3,
19. });
20. });
21. </script>
22. </head>
23. <body>
24. <div id="container"> <!-- 容器 -->
25. <div class="scroll"> <!-- 每次要加载数据的数据块-->
26. 第⼀页内容第⼀页内容<br>
27. 第⼀页内容<br>第⼀页内容<br>第⼀页内容<br>
28. 第⼀页内容<br>第⼀页内容<br>第⼀页内容<br>
29. 第⼀页内容<br>第⼀页内容<br>第⼀页内容
30. </div>
31. </div>
32. <div id="navigation" align="center"> <!-- 页⾯导航-->
33. <a href="user/list?page=1"></a> <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前⽹页有相同布局
的才可以。另外⼀个重要的地⽅是page参数，这个⼀定要加在这⾥，它的作⽤是指出当前页⾯页码，没加载⼀次数据，page⾃动+1，我们可以从服务器⽤request拿到他然后进⾏后⾯的分页处理。-->
34. </div>
35. </body>
36. </html>
三.细微部分
1.js函数⾥还可定义的其他属性:
[javascript]
1. debug : true, //⽤于调试，如果需要⽤到，只需在⽹页头引⼊官⽹demo⾥的debug.js⽂件
2. loadingImg : "/img/loading.gif", //加载时候显⽰的进度条，⽤户可以⾃定义
3. loadingText : "Loading ", //加载时显⽰的⽂字
4. extraScrollPx: 50, //离⽹页底部多少像素时触发ajax
5. donetext : "I think we've hit the end, Jim" , //加载完数据(到达底部时)显⽰的⽂字提醒
6. errorCallback: function(){}, //加载完数据后的回调函数，可选
其他属性暂不作过多介绍
2.数据的载⼊⽅式
①html ：如果你已经有固定的数据块，可以放到html⾥⾯加载静态页⾯。
②json ：可以⽤后台返回json的⽅式，返回的时候要指定temple⾥⾯的html模版，否则会出错。
③我上⾯例⼦⽤的其实也是json，前台在Action层把数据取出后再⽤StringBuilder拼装成html格式的字符串返回前台。（个⼈习惯）
3.数据分页⽅式
本例⽤hibernate进⾏数据分页。
以上内容仅作参考，时间问题暂且收笔。
这⾥给出⼀个下载，不是这个例⼦但是原理是⼀样的，希望有帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论