Heim > php教程 > php手册 > Infinite-Scroll滚动加载数据

Infinite-Scroll滚动加载数据

WBOY
Freigeben: 2016-06-07 11:38:40
Original
1334 Leute haben es durchsucht

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:
Infinite-Scroll演示效果:http://www.sucaihuo.com/php/108.html<div> <br>     <p><a>1、PHP生成图片验证码</a></p> <br>     <p><a>2、jQuery实现table上移下移和置顶</a></p> <br>     <p><a>3、基于jQuery的cookie插件</a></p> <br>     <p><a>4、jQuery仿淘宝图片放大镜插件imagezoom</a></p> <br>     <p><a>5、简单jQuery商品属性选择表单</a></p> <br>    ....... <br> </div>接着我们再放入导航的选择器#pages和下一页#next,.loading可不放。<div><a>下一页</a></div> <br> <div></div>infinitescroll调用$('#content').infinitescroll({ <br>     loading: { <br>         msgText: "", <br>         img: "images/loading.gif", <br>         finishedMsg: '没有新数据了哦...', <br>         selector: '.loading' //loading选择器 <br>     }, <br>     navSelector: "#pages", //导航的选择器,会被隐藏 <br>     nextSelector: "#next",//包含下一页链接的选择器 <br>     itemSelector: "p",//你将要取回的选项(内容块) <br>     debug: true, //启用调试信息,若启用必须引入debug.js <br>     dataType: 'html',//格式要和itemSelector保持一致 <br>     maxPage: 5,//最大加载的页数 <br>     //                animate: true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有 <br>     extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载,默认150 <br>     //                bufferPx: 40, //载入信息的显示时间,时间越大,载入信息显示时间越短 <br>     errorCallback: function() { //加载完数据后的回调函数 <br>     }, <br>     path: function(index) { //获取下一页方法 <br>         return "page.php?p=" + index; <br>     }, <br> }, <br> function(newElements, data, url) { //回调函数 <br>     //console.log(data); <br>     //alert(url); <br> });

AD:真正免费,域名+虚机+企业邮箱=0元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage