无限滚动

无限滚动允许在页面滚动接近底部时加载额外内容或执行任何其他所需操作。

无限滚动布局

要启用无限滚动，您需要向任何可滚动的容器添加额外的infinite-scroll-content类，特别是我们的页面滚动区域 -<div class="page-content">:

<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        ...
        <div class="preloader infinite-scroll-preloader"></div>
    </div>
</div>

Where:

页面顶部的无限滚动

如果您需要在页面顶部使用无限滚动（当页面滚动到顶部时），您需要向"page-content"添加额外的infinite-scroll-top类：

<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        <div class="preloader infinite-scroll-preloader"></div>
        ...
    </div>
</div>

无限滚动应用方法

有两个与应用程序一起使用的无限滚动容器方法：

app.infiniteScroll.create(el)- 向指定的HTML元素添加无限滚动事件监听器

  • el - HTMLElement或字符串（使用CSS选择器）- 无限滚动容器。必需。
仅在您在页面初始化后添加无限滚动内容或如果您想稍后启用它的情况下使用此方法。否则，如果页面初始化时存在"infinite-scroll-content"元素，它将自动创建

app.infiniteScroll.destroy(el)- 从指定的HTML容器中移除无限滚动事件监听器

  • el - HTMLElement或字符串（使用CSS选择器）- 无限滚动容器。必需。

无限滚动事件

无限滚动将在应用程序实例上触发以下DOM事件：

DOM 事件

事件Target描述
infinite无限滚动容器<div class="page-content infinite-scroll-content">当页面滚动达到指定的（在data-infinite-distance属性中）距离到底部时，将触发事件。

App Events

无限滚动组件在应用程序实例以及DOM元素上发出事件。

事件Target参数描述
infiniteapp（el, event）当页面滚动达到指定的（在data-infinite-distance属性中）距离到底部时，将触发事件。

示例

infinite-scroll.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Infinite Scroll</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite=${loadMore}>
      <div class="block-title">Scroll bottom</div>
      <div class="list simple-list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          ${items.map((item, index) => $h`
          <li key=${index}>Item ${item}</li>
          `)}
        </ul>
      </div>
      ${hasMoreItems && $h`
      <div class="preloader infinite-scroll-preloader"></div>
      `}
    </div>
  </div>
</template>
<script>
  export default (props, { $, $update }) => {
    let allowInfinite = true;
    let hasMoreItems = true;
    let lastItem = 20;
    const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    const loadMore = () => {
      if (!allowInfinite) return;
      allowInfinite = false;

      setTimeout(function () {
        if (lastItem >= 200) {
          hasMoreItems = false;
          $update();
          return;
        }

        for (var i = 1; i <= 20; i++) {
          items.push(lastItem + i);
        }

        allowInfinite = true;
        lastItem += 20;

        $update();
      }, 1000);
    }

    return $render;

  }
</script>
改进此文档
在本页上