スポンサースポンサーになる

無限スクロール

無限スクロールを使用すると、ページのスクロールが下部に近づいたときに、追加のコンテンツを読み込んだり、必要なアクションを実行したりできます。

無限スクロールレイアウト

無限スクロールを有効にするには、スクロール可能なコンテナ、特にページのスクロール領域である<div class="page-content">に、追加のinfinite-scroll-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>

無限スクロールアプリメソッド

無限スクロールコンテナで使用できる2つのアプリメソッドがあります。

app.infiniteScroll.create(el)- 指定されたHTML要素に無限スクロールイベントリスナーを追加します

  • el - HTMLElementまたはstring（CSSセレクタ付き） - 無限スクロールコンテナ。必須です。
ページの初期化後に無限スクロールコンテンツを追加した場合、または後で有効にする場合は、このメソッドのみを使用してください。そうでない場合、ページの初期化時に「infinite-scroll-content」要素が存在する場合は、自動的に作成されます。

app.infiniteScroll.destroy(el)- 指定されたHTMLコンテナから無限スクロールイベントリスナーを削除します

  • el - HTMLElementまたはstring（CSSセレクタ付き） - 無限スクロールコンテナ。必須です。

無限スクロールイベント

無限スクロールは、アプリインスタンスで次のDOMイベントを発生させます。

DOMイベント

イベントターゲット説明
infinite無限スクロールコンテナ<div class="page-content infinite-scroll-content">ページスクロールがdata-infinite-distance属性で指定された距離まで下部に達すると、イベントがトリガーされます。

アプリイベント

無限スクロールコンポーネントは、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>
このドキュメントを改善する
このページについて