无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
首先我们在页面上先放置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>
jquery.infinitescroll.js插件调用:
$('#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无限滚动演示:
http://www.sucaihuo.com/php/108.html
分享到:
相关推荐
在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’ InfiniteScroll的更多用法element官网 ...
Reactg无限滚动 该软件包是无限滚动的:组件,挂钩或HOC。 你选! 安装: yarn add react-g-infinite-scroll 或者 npm install --save react-g-infinite-scroll 现场演示: 如何: 选项: 选项 默认 描述 ...
jQuery的无限滚动 jQuery 的基本无限滚动模式。 入门 用法 基本 $(window).infinitescroll({url: [removed].... 一旦发生这种情况,该插件将停止尝试加载数据。 选项¶ ↑ url: default: null The URL to fet
aurelia-infinite-scroll是的插件,它添加了无限浏览器滚动功能,即Facebook加载。 当自定义属性容器的底部(即div)到达浏览器窗口的底部时,插件应调用自定义表达式-函数,这通常会向容器添加更多元素,从而呈现...
Vue下滚动到页面底部无限加载数据Demo 看到一篇, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件...
angular 整合infinite-scroll 下拉滚动加载数据,基于angularJs实现下拉刷新数据,可以无限加载,自动铺满整个屏幕
React无限滚动 今天,我们将学习如何在React中实现无限滚动。 无限滚动技术可以在滚动时加载更多数据。 从用户的角度来看,无限滚动更为方便,因为在分页中,用户必须单击以进入下一页以加载更多数据。
无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
react-use-infinite-loader使用为不涉及滚动事件侦听器的无限滚动提供高性能解决方案。 :warning: 某些旧版浏览器IntersectionObserver API,但是您可以轻松地来。 顾名思义, react-use-infinite-loader使用...
如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...
MVC 无限滚动网格 这里演示了一种向 ASP.NET MVC 项目中的网格、表格或任何其他 HTML 元素添加无限滚动的方法。 ###### 通过以下方式使用: 从 GitHub 复制代码到这里 为自己克隆 repo 通过 NuGet 将其添加到您...
无限滚动+图像延迟加载 使用HTML IntersectionObserver API实现无限滚动和图像延迟加载。 阅读上的文章 观看实时预览: : 快速入门指南 克隆仓库 运行yarn安装项目依赖项 运行yarn start启动项目。
运行此命令以启动服务器,以便可以从server获取所有数据。 第二步 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括...
在一个项目中,我们想过创建一个无限滚动的页面,即每当到达页面底部时,我们加载下一页等等。 最初我们探索了一些类似的开源组件,但所有可用的组件都有一个共同点——它们将每个页面的数据连接起来,并将它们...
@ zestia / ember-simple-infinite-... 它没有像其他无限滚动实现那样与Ember-Data耦合。 安装 ember install @zestia/ember-simple-infinite-scroller 演示版 例 {{ #each things as | thing | }} ... {{ /
具有无限滚动支持的React Table组件 原料药 data: Array < { } > onScroll : Function onItemClick : ( item : Object ) => any onRemoveItems : ( items : Array < Object > ) = > any / >
无限滚动,十万条数据渲染。 经过我一大圈的折腾。还是默默的卸载了插件。我只是需要实现一个下拉加载,不需要其他这么多的功能。看了看其他人的源码,直接撸了起来,实现一个List组件。 效果展示 MList.vue ...
使用图像使用表格数据分页自定义页面包装器配置选项外观选项回调功能分页选项infinite.isElementInViewport的选项造型风格CSS类固定滚动和overflow-anchor 尺寸依存关系执照 例子例子 特征使用浏览器默认值自然滚动...