スポンサー
Support Framework7

無限スクロール

    Infinite Scrollは、ページのスクロールが下に近づいたときに、追加のコンテンツをロードしたり、その他の必要なアクションを行うことができます。

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

    無限スクロールを有効にするには、スクロール可能なコンテナ、特にページスクロール領域である <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>

    構造

    • div class="page-content infinite-scroll-content" 無限スクロールコンテナ

    • data-infinite-distance属性では、無限スクロールイベントを発生させるための、ページ下部からの距離(px)を設定することができます。デフォルトでは、50 (px)です。

    • div class="preloader infinite-scroll-preloader" preloaderには、無限スクロールで使用するためのスタイルがいくつか追加されています。

    トップの無限スクロール

    ページの上部に無限スクロールを使用したい場合は、"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)- add infinite scroll event listener to the specified HTML element

    • el - HTMLElementまたはstring(CSSセレクタ付き) - 無限スクロールコンテナ。必須です。
    Use this methods only in case you have added infinite scroll content after page init or if you want to enable it later. Otherwise if there is "infinite-scroll-content" element on page init it will be created automatically

    app.infiniteScroll.destroy(el)- remove infinite scroll event listener from the specified HTML container

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

    無限スクロールのイベント

    Infinite Scrollはアプリのインスタンス上で以下のDOMイベントを発生させます。

    DOM イベント

    EventTargetDescription
    infiniteInfinite Scroll container<div class="page-content infinite-scroll-content">Event will be triggered when page scroll reaches specified (in data-infinite-distance attribute) distance to the bottom.

    アプリのイベント

    Infinite Scroll コンポーネントは、DOM 要素だけでなくアプリ インスタンスに対してもイベントを発行します。

    EventTargetArgumentsDescription
    infiniteapp(el, event)Event will be triggered when page scroll reaches specified (in data-infinite-distance attribute) distance to the bottom.

    Example

    <template>
      <div class="page" data-page="home">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title sliding">Infinite Scroll</div>
          </div>
        </div>
        <div class="page-content infinite-scroll-content" @infinite=${loadMore}>
          <div class="list simple-list">
            <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>