赞助商成为赞助商

无限滚动

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

无限滚动布局

要启用无限滚动，您需要向任何可滚动容器添加额外的 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>

其中

顶部无限滚动

如果您需要在页面顶部使用无限滚动（当它滚动到顶部时），您需要向“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 的方法可以与无限滚动容器一起使用

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

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

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

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

无限滚动事件

无限滚动将在 app 实例上触发以下 DOM 事件

DOM 事件

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

应用事件

无限滚动组件在 app 实例和 DOM 元素上都会发出事件。

事件目标参数描述
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>
改进此文档
在本页