無限スクロール

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 イベント

Event	Target	Description
infinite	Infinite 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 要素だけでなくアプリインスタンスに対してもイベントを発行します。

Event	Target	Arguments	Description
infinite	app	(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>