jquery鼠标向下滚动时加载更多内容（无限滚动分页）插件

 website 下载

插件介绍

这是一款轻量级可配置的jquery无限滚动插件，取代了传统的分页，提供了一个类似于本地移动应用程序的更好的内容加载体验。当内容区域不断滚动到页面底部（或特定容器）时，通过AJAX自动或手动从服务器加载更多内容。

使用方法

1.在页面加载最新版本的jQuery库之后，加载滚动插件。

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

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

// data.json
{
  "content": {
    "0": "Entry 1",
    "1": "Entry 2",
    "2": "Entry 3",
    "3": "Entry 4",
    "4": "Entry 5",
    // ... 更多内容
  }
}

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,  
      'size': 10,  
    }
  });
});

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

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1,  
      'size': 10,  
    },
    'autoload': false,
    'before': function(){},  
    'after': function(elementsLoaded){
      $(elementsLoaded).fadeInWithDelay(); 
    }
  });
});

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

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1,  
      'size': 10, 
    },
    'scroller': $("#myContainer")
  });
});

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

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1,  
      'size': 10, 
    },
    'heightOffset': 0
  });
});

9. 自定义加载消息。

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, 
      'size': 10,  
    },
    'loading': '#loading',
    'loadingText': '正在加载中',
    'loadingNomoreText': '我是有底线的',
    'manuallyText': '点击加载更多'
  });
});