向下滚动加载更多内容 - 无限滚动分页

版本:

浏览量:1425

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

一个小型但可配置的无限滚动插件，用于取代传统的分页，提供类似于原生移动应用程序的更好的内容加载体验。

该插件允许访问者在将内容区域连续滚动到页面底部（或特定容器）时，通过 AJAX 自动或手动从服务器加载更多内容。

如何使用它：

1. 加载最新版本的 jQuery 库后，加载Infinite Scroll Pagination 插件。

<link href="/path/to/css/scrollpagination.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/scrollpagination.js"></script>

2. 在 JSON 文件中定义您的内容，当向下滚动页面时，插件从中获取更多内容并将更多内容附加到底部现有内容。

// data.json
{
  "content": {
    "0": "Entry 1",
    "1": "Entry 2",
    "2": "Entry 3",
    "3": "Entry 4",
    "4": "Entry 5",
    // ... more content here
  }
}

3. 创建一个容器来保存您的内容。

<div id="scrollpagination">
  <ul id="content"></ul>
</div>

4. 创建一个 DIV 来保存加载消息。

<div class="loading" id="loading"></div>

5. 调用函数并定义 JSON 文件的路径。就是这样。

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json',
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    }
  });
});

6. 默认情况下，插件会在向下滚动网页时自动从 JSON 文件加载内容。要使用加载更多按钮手动加载更多内容，请执行以下步骤：

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json',
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'autoload': false,
    'before': function(){}, // before loading
    'after': function(elementsLoaded){
      $(elementsLoaded).fadeInWithDelay(); // fade in content when loaded
    }
  });
});

7. 确定要在其中跟踪滚动事件的容器。默认值：整个窗口。

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json',
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'scroller': $("#myContainer")
  });
});

8. 确定向下滚动页面时触发自动加载行为的偏移量。默认值：20 像素。

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json',
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'heightOffset': 0
  });
});

9. 自定义加载消息。

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json',
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'loading': '#loading',
    'loadingText': 'Wait a moment... it\'s loading!',
    'loadingNomoreText': 'No more.',
    'manuallyText': 'click to loading more.'
  });
});

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码