Infinite-Scroll无限滚动加载数据

无限滚动的实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。
首先我们在页面上先放置10条数据，即第一页，每一项都是p标签：

<div id="content">     <p><a href="http://www.sucaihuo.com/js/91.html" target="_blank">1、PHP生成图片验证码</a></p>     <p><a href="http://www.sucaihuo.com/js/90.html" target="_blank">2、jQuery实现table上移下移和置顶</a></p>     <p><a href="http://www.sucaihuo.com/js/89.html" target="_blank">3、基于jQuery的cookie插件</a></p>     <p><a href="http://www.sucaihuo.com/js/88.html" target="_blank">4、jQuery仿淘宝图片放大镜插件imagezoom</a></p>     <p><a href="http://www.sucaihuo.com/js/87.html" 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>

[b]jquery.infinitescroll.js插件调用[/b]：
$('#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);
});
infinitescroll无限滚动演示：[url]http://www.sucaihuo.com/php/108.html[/url] :idea: :idea: :idea:

Infinite-Scroll无限滚动加载数据相关推荐

php 无限滚动加载,无限滚动,_无限滚动加载数据问题，无限滚动 - phpStudy
无限滚动加载数据问题做移动端程序的时候,经常会遇到无限滚动的功能,通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求,后端返回数据然后动态追加DOM,但是如果DOM结构很复杂,追加的时候拼 ...
vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
为什么80%的码农都做不了架构师?>>> 1.什么是 InfiniteScroll? 无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片 ...
jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
vue 实现数据滚动显示_vue 滚动加载数据
table数据多的时候打开页面会加载一会才显示数据,这样体验不好,所以要做滚动加载数据 {{eventMap[scope.row.eventId] == null ? '--': eventMap[s ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
01-vue项目之滚动加载数据
最近刚结束了一个vue项目,项目中发现了自己很多问题,例如,看到功能就想要使用插件,(⊙o⊙)-,这样是肯定不行呀,哎,用插件可以,自己也得会写呀,现在就记录一下一个不错的滚动加载数据. 1.页面布局 ...
无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...

Infinite-Scroll无限滚动加载数据

Infinite-Scroll无限滚动加载数据相关推荐

最新文章

热门文章