欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

PHP+InfiniteScroll实现网页无限滚动加载数据实例

程序员文章站 2023-10-31 12:36:16
PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。 ......

php+infinitescroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。

PHP+InfiniteScroll实现网页无限滚动加载数据实例
首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:

1 <div id="content"> 
2     <p><a href="#" target="_blank">1、php生成图片验证码</a></p> 
3     <p><a href="#" target="_blank">2、jquery实现table上移下移和置顶</a></p> 
4     <p><a href="#" target="_blank">3、基于jquery的cookie插件</a></p> 
5     <p><a href="#" target="_blank">4、jquery仿淘宝图片放大镜插件imagezoom</a></p> 
6     <p><a href="#" target="_blank">5、简单jquery商品属性选择表单</a></p> 
7    ....... 
8 </div>


接着我们再放入导航的选择器#pages和下一页#next,.loading可不放。

1 <div id="pages"><a id="next" href="page.php?page=1">下一页</a></div> 
2 <div class="loading"></div>


然后我们引入jquery库、debug.js(调试)及jquery.infinitescroll.js插件和js代码:

 1 <script type="text/javascript" src="jquery.js"></script>  
 2 <script src="debug.js"></script> 
 3 <script src="jquery.infinitescroll.js"></script>
 4 <script>
 5 $('#content').infinitescroll({ 
 6     loading: { 
 7         msgtext: "", 
 8         img: "images/loading.gif", 
 9         finishedmsg: '没有新数据了哦...', 
10         selector: '.loading' //loading选择器 
11     }, 
12     navselector: "#pages", //导航的选择器,会被隐藏 
13     nextselector: "#next",//包含下一页链接的选择器 
14     itemselector: "p",//你将要取回的选项(内容块) 
15     debug: true, //启用调试信息,若启用必须引入debug.js 
16     datatype: 'html',//格式要和itemselector保持一致 
17     maxpage: 5,//最大加载的页数 
18     //                animate: true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有 
19     extrascrollpx: 150, //滚动条距离底部多少像素的时候开始加载,默认150 
20     //                bufferpx: 40, //载入信息的显示时间,时间越大,载入信息显示时间越短 
21     errorcallback: function() { //加载完数据后的回调函数 
22     }, 
23     path: function(index) { //获取下一页方法 
24         return "page.php?p=" + index; 
25     }, 
26 }, 
27 function(newelements, data, url) { //回调函数 
28     //console.log(data); 
29     //alert(url); 
30 });
31 </script>


本文转自: 转载请注明出处!