`
hjl416148489
  • 浏览: 22244 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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>

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无限滚动的具体使用方法

    Element InfiniteScroll无限滚动是一种常见的前端技术,用于在用户滚动至页面底部时动态加载更多内容,从而减少页面的跳转次数,并提升用户体验。Element UI是一个基于Vue.js的前端UI框架,它提供了一套丰富的组件。...

    前端开源库-ng-infinite-scroll

    接着,在需要实现无限滚动的HTML元素上添加`infinite-scroll`指令,并指定一个表达式作为加载更多数据的回调函数: ```html &lt;div infinite-scroll="loadMoreItems()" infinite-scroll-distance="2"&gt; &lt;!-- 你的内容...

    el-table-infinite-scroll:El-Table无限滚动

    element-ui 的表格与无限滚动的结合(el-table + infinite-scroll)。查看实例教程此指令依赖于 element-ui@2.12.0,使用前请熟悉:element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...

    ng-infinite-scroll.js

    5. **配置**:ng-infinite-scroll.js还提供了其他可配置的选项,例如`infinite-scroll-distance`(滚动到离底部的距离触发加载),`infinite-scroll-disabled`(当条件满足时禁用无限滚动),以及`infinite-scroll-...

    使用Element的InfiniteScroll 无限滚动组件报错的解决

    在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’ InfiniteScroll的更多用法element官网 ...

    详解无限滚动插件vue-infinite-scroll源码解析

    Vue.js 是一款流行的前端框架,而 `vue-infinite-scroll` 是 Vue.js 生态系统中的一个插件,专门用于实现无限滚动或称为“滚动加载”功能。这个插件可以帮助开发者轻松地处理用户滚动到页面底部时加载更多数据的情况...

    react-infinite-scroll:ReactJS无限滚动方法

    在ReactJS中,实现无限滚动是一项常见的需求,特别是在数据量庞大的列表展示时,为了提高用户体验,我们可以采用“懒加载”或者“无限滚动”的技术。React-infinite-scroll 是一个专门用于React应用的无限滚动库,它...

    react-g-infinite-scroll:无限滚动钩和HOC

    Reactg无限滚动 该软件包是无限滚动的:组件,挂钩或HOC。 你选! 安装: yarn add react-g-infinite-scroll 或者 npm install --save react-g-infinite-scroll 现场演示: 如何: 选项: 选项 默认 描述 ...

    使用vue-infinite-scroll实现无限滚动效果

    在构建具有大量数据流的应用时,无限滚动(Infinite Scroll)是一种常见的功能,它可以在用户滚动页面接近底部时自动加载更多内容。Vue-infinite-scroll 是一个专门为 Vue 设计的无限滚动插件,它可以帮助开发者轻松...

    el-table无限滚动+控制列是否显示+列排序(非json)

    loading: false, // 是否正在加载数据 hasMore: true // 是否还有更多数据 }; }, methods: { loadMore(row, loading, done) { // 加载更多数据的方法 }, handleScroll(e) { const tableBody = e.target....

    infinite-scroll-vuejs:学习Vue-滚动到页面底部无限加载数据Demo

    Vue下滚动到页面底部无限加载数据Demo 看到一篇, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件...

    qt-infinite-scroller-demo-master.zip

    QT无限滚动(Infinite Scroll)技术是GUI应用开发中一种常见的设计模式,特别是在网页和移动应用中,用于处理大量数据的展示。QT框架提供了一种高效的方法来实现这一功能,使得用户可以无缝浏览无限数量的数据,而...

    infinite-scroll 手机HTML5 JS滑动插件

    无限滚动(Infinite Scroll)是一种常见的网页设计技术,特别是在手机HTML5应用中,它允许用户在浏览内容时平滑地加载更多项目,而无需翻页。这种技术极大地提升了用户体验,尤其是在处理大量数据如图片流、文章列表...

    jquery-infinite-scroll:jQuery 无限滚动插件

    jQuery的无限滚动 jQuery 的基本无限滚动模式。 入门 用法 基本 $(window).infinitescroll({url: [removed].... 一旦发生这种情况,该插件将停止尝试加载数据。 选项¶ ↑ url: default: null The URL to fet

    aurelia-infinite-scroll:Aurelia无限滚动

    aurelia-infinite-scroll是的插件,它添加了无限浏览器滚动功能,即Facebook加载。 当自定义属性容器的底部(即div)到达浏览器窗口的底部时,插件应调用自定义表达式-函数,这通常会向容器添加更多元素,从而呈现...

    jquery.infinitescroll.js演示示例以及常用参数

    `more_msg`可能是存放更多消息或数据的文件,可能包含JSON格式的额外内容,或者是一个HTML片段,用于无限滚动加载时添加到页面。根据具体应用场景,你需要按照`nextSelector`配置从这个文件中获取数据,或者在服务端...

    【JavaScript源代码】Vue向下滚动加载更多数据scroll案例详解.docx

    在本文中,我们将深入探讨如何使用 Vue.js 的 `vue-infinite-scroll` 插件来实现在网页中向下滚动时加载更多数据的功能,这是一种常见的优化用户体验的策略,称为“滚动加载”或“无限滚动”。 首先,要安装 `vue-...

Global site tag (gtag.js) - Google Analytics