帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-24 网页特效 评论

插件介绍

这是一款轻量级可配置的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': '点击加载更多'
  });
});
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言