无限滚动

无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。

无限滚动demo

你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - div.content

无限滚动

...
{% highlight html %}

无限滚动

{% endhighlight %}

其中:

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 += '
  • Item ' + i + '
  • '; } // 添加新条目 $('.list-container').append(html); } //预先加载20条 addItems(itemsPerLoad, 0); // 上次加载的序号 var lastIndex = 20; // 注册'infinite'事件处理函数 $(document).on('infinite', '.infinite-scroll',function() { // 如果正在加载,则退出 if (loading) return; // 设置flag loading = true; // 模拟1s的加载过程 setTimeout(function() { // 重置加载flag loading = false; if (lastIndex >= maxItems) { // 加载完毕,则注销无限加载事件,以防不必要的加载 $.detachInfiniteScroll($('.infinite-scroll')); // 删除加载提示符 $('.infinite-scroll-preloader').remove(); return; } // 添加新条目 addItems(itemsPerLoad, lastIndex); // 更新最后加载的序号 lastIndex = $('.list-container li').length; //容器发生改变,如果是js滚动,需要刷新滚动 $.refreshScroller(); }, 1000); }); {% endhighlight %}

    在顶部的无限滚动

    如果你需要向上滚动到顶部时进行无限滚动,那么需要在 “page-content”添加额外的class infinite-scroll-top

    在顶部的无限滚动

    ...
    {% highlight html %}

    在顶部的无限滚动

    ...
    {% endhighlight %}

    无限滚动事件

    事件(Event) 对象(Target) 描述(Description)
    infinite 可无限滚动的容器 div.content.infinite-scroll" 事件会在页面滚动至距底部还有特定距离(可在data-distance中配置)时触发

    无限滚动API

    有2个App方法:

    {% highlight js %} $.attachInfiniteScroll(container) - 为指定的HTML元素容器添加无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。 {% endhighlight %} {% highlight js %} $.detachInfiniteScroll(container) - 从指定的HTML元素容器删除无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。 {% endhighlight %}

    注意,仅在你使用$.detachInfiniteScroll方法删除过事件监听器后,才可能需要使用 $.attachInfiniteScroll方法,因为无限滚动组件的事件监听器会在“initPage”时被自动添加。