使用 jQuery XMLHttpRequest 的无限滚动视图 - 简单的 iScroll

版本:

浏览量:1082

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

Simple i Scroll是一个小巧的 jQuery 无限滚动插件，当您滚动到容器或整个文档的边界时，它会动态加载和附加更多内容。

如何使用它：

1. 安装并下载 Simple iScroll。

# NPM
$ npm install @kanety/jquery-simple-iscroll --save

2. 要使用此插件，请在 jQuery 之后包含 Simple iScroll 插件的缩小版本。

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-simple-iscroll.js"></script>

3. 创建指向要加载到无限滚动视图中的外部文件的链接组。

<div id="paging" style="display: none;">
  <a class="prev">prev</a>
  <a href="index.1.html">index.1.html</a>
  <a href="index.2.html">index.2.html</a>
  <a href="index.3.html">index.3.html</a>
  <a href="index.2.html" class="next">next</a>
</div>

4. 创建加载指示器，加载更多内容时会出现该指示器。

<div id="loading" style="display: none;">Loading...</div>

5.在目标容器上初始化插件，覆盖默认设置如下：

$('#container').simpleIscroll({
  content: '#myView',
  paging: '#paging',
  next: 'a.next',
  loading: '#loading'
});

6. 指定触发无限滚动时的边距大小。默认值：0。

$('#container').simpleIscroll({
  margin: 10
});

7. 事件处理程序。

$('#container').simpleIscroll({
  // options here
}).on('load:start', function(e, href) {
  // on start
}).on('load:end', function(e, href) {
  // on end
}).on('load:success', function(e, $content, $paging) {
  // on success
}).on('load:failure', function(e, nextHref, xhr, status, error) {
  // on failure
});

联系我们