jScroll 无限滚动的 jQuery 插件 - 文章教程

jScroll 无限滚动的 jQuery 插件

发布于 2020-06-06 字数 4874 浏览 1378 评论 0

jScroll 是一个用于无限滚动的 jQuery 插件,当滚动到底部就触发预定义的一个点击事件加载下一页,是在当前页面或内容区域滚动时通过 Ajax 加载内容的能力。新内容可以在每次滚动到现有内容的末尾时自动加载,也可以通过单击现有内容末尾的导航链接来触发加载。

jScroll 无限滚动的 jQuery 插件

安装

依赖性

jScroll 需要 jQuery v1.8.0 或更高版本。

CDN

Unpkg

将脚本包含在 unpkg 具有指定的版本号,其中 #.#.# 表示版本。

<script src="//unpkg.com/jscroll@#.#.#/dist/jquery.jscroll.min.js"></script>

或者,您可以省略 Version 标记来加载最新发布的版本。

<script src="//unpkg.com/jscroll/dist/jquery.jscroll.min.js"></script>

CDNJS

将脚本包含在 CNDJS 有指定的版本号,其中 #.#.# 表示版本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/#.#.#/jquery.jscroll.min.js"></script>

包管理器

NPM

$ npm install jscroll --save

Yarn

$ yarn add jscroll

Bower

$ bower install jscroll --save

使用

初始化

这个 jscroll 方法在选择器上调用,其中包含可滚动内容。始终确保在初始化 jScroll 之前已经在 DOM 中呈现了要调用 jScroll 的内容,初始化jScroll DOMContentLoaded 活动:

$(function() {
    $('.jscroll').jscroll();    
});

定制化

这个 jscroll 方法将可选对象文字作为重写默认选项的参数。下面是如何做到这一点的一个例子。

var options = {
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
    padding: 20,
    nextSelector: 'a.jscroll-next:last',
    contentSelector: 'li'
};

$('.jscroll').jscroll(options);

看见配置所有选项的列表。

配置

debug

  • 类型:Boolean
  • 违约:false

当设置为 true,则将有用信息输出到控制台显示,如果 console 对象存在。

autoTrigger

  • 类型:Boolean
  • 违约:true

当设置为 true,当用户滚动到包含元素的底部时,将自动触发下一组内容的加载。当设置为false,所需的下一个链接将在单击时触发下一组内容的加载。

autoTriggerUntil

  • 类型:Boolean|Number
  • 违约:false

设置为大于0关掉autoTrigger在指定的页数之后分页。要求autoTrigger成为true.

loadingHtml

  • 类型:String
  • 违约:<small>Loading...</small>

在加载下一组内容时显示在内容底部的HTML。

loadingFunction

  • 类型:Function|Boolean
  • 违约:false

后面运行的JavaScript函数。loadingHtml 已经画出来了。

padding

  • 类型:Number
  • 违约:0

与可滚动内容底部的距离,在此位置触发下一组内容的加载。这只在下列情况下才适用autoTrigger设置为true.

nextSelector

  • 类型:String
  • 违约:a:last

用于查找包含href指向下一组内容。如果找不到此选择器,或者如果它不包含href属性时,jScroll将从调用它的元素中自行销毁和解除绑定。

contentSelector

  • 类型:String
  • 违约:''

仅在下一组内容的响应中加载部分内容的方便选择器。如果为空,则忽略此选择器,并将整个响应应用于DOM。

更多信息:contentSelector选项及其加载响应片段的方式,请参阅 .load() 方法的 jQuery 文档.

pagingSelector

  • 类型:String
  • 违约:''

还可以为分页控件定义选择器,以便隐藏它们,而不只是隐藏下一个页面链接。

callback

  • 类型:Function|Boolean
  • 违约:false

还可以定义在加载了一组内容之后调用的回调函数。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0