无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。
你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - div.content
其中:
div class="page-content infinite-scroll"
-是我们无限滚动的容器data-distance
- 属性用来配置页面滚动到离底部多远时触发无限滚动事件,默认是50 (px)javacript:
{% highlight js %} // 加载flag var loading = false; // 最多可加载的条目 var maxItems = 100; // 每次加载添加多少条目 var itemsPerLoad = 20; function addItems(number, lastIndex) { // 生成新条目的HTML var html = ''; for (var i = lastIndex + 1; i <= lastIndex + number; i++) { html += '如果你需要向上滚动到顶部时进行无限滚动,那么需要在 “page-content
”添加额外的class infinite-scroll-top
事件(Event) | 对象(Target) | 描述(Description) |
---|---|---|
infinite | 可无限滚动的容器
div.content.infinite-scroll"
|
事件会在页面滚动至距底部还有特定距离(可在data-distance 中配置)时触发 |
有2个App方法:
{% highlight js %} $.attachInfiniteScroll(container) - 为指定的HTML元素容器添加无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。 {% endhighlight %} {% highlight js %} $.detachInfiniteScroll(container) - 从指定的HTML元素容器删除无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。 {% endhighlight %}注意,仅在你使用$.detachInfiniteScroll方法删除过事件监听器后,才可能需要使用 $.attachInfiniteScroll方法,因为无限滚动组件的事件监听器会在“initPage”时被自动添加。