Infinite-Scroll无限滚动加载数据

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
$('#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);
});

滚动加载演示与下载:[url]http://www.sucaihuo.com/js/108.html[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值