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

Infinite-Scroll滚动加载数据

WBOY
Release: 2016-06-07 11:38:40
Original
1330 people have browsed it

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
首先我们在页面上先放置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元

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template