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

这篇文章主要介绍“PHP+InfiniteScroll网页无限滚动加载数据怎么实现”，在日常操作中，相信很多人在PHP+InfiniteScroll网页无限滚动加载数据怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”PHP+InfiniteScroll网页无限滚动加载数据怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。

首先我们在页面上先放置10条数据，即第一页，每一项都是p标签：

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

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

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

然后我们引入jQuery库、debug.js（调试）及jquery.infinitescroll.js插件和js代码：

<script type="text/javascript" class="lazy" data-src="jquery.js"></script>  <script class="lazy" data-src="debug.js"></script> <script class="lazy" data-src="jquery.infinitescroll.js"></script><script>$('#content').infinitescroll({     loading: {         msgText: "",         img: "images/loading.gif",         finishedMsg: '没有新数据了哦...',         selector: '.loading' //loading选择器     },     navSelector: "#pages", //导航的选择器，会被隐藏     nextSelector: "#next",//包含下一页链接的选择器     itemSelector: "p",//你将要取回的选项(内容块)     debug: true, //启用调试信息，若启用必须引入debug.js     dataType: 'html',//格式要和itemSelector保持一致     maxPage: 5,//最大加载的页数     //                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有     extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150     //                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短     errorCallback: function() { //加载完数据后的回调函数     },     path: function(index) { //获取下一页方法         return "page.php?p=" + index;     }, }, function(newElements, data, url) { //回调函数     //console.log(data);     //alert(url); });</script>

到此，关于“PHP+InfiniteScroll网页无限滚动加载数据怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！