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

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

版本:

浏览量:1115

最后更新:2021-09-12

应用标签:Jquery插件gitMAC 软件

推荐指数:

详细信息

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
});
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。