Skip to main content

Нескінченне прокручування

Навігація

Нескінченне прокручування

Нескінченне прокручування дозволяє завантажувати додатковий вміст або виконувати будь-яку іншу необхідну дію, коли прокручування сторінки знаходиться близько до низу.

Макет нескінченного прокручування

Щоб увімкнути Infinite Scroll, вам потрібно додати додатковий клас 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>
  • — div class="page-content infinite-scroll-content — наш контейнер для нескінченного прокручування
  • — data-infinite-distance — Атрибут дозволяє налаштувати відстань від нижнього краю сторінки (у пікселях), щоб ініціювати подію нескінченного прокручування. За замовчуванням, якщо не вказано, це 50 (px)
  • div class="preloader infinite-scroll-preloader" — попередній завантажувач із кількома додатковими стилями для використання з нескінченним прокручуванням

Нескінченне прокручування зверху (On Top)

Якщо вам потрібно використовувати нескінченне прокручування вгорі сторінки (коли вона прокручується вгору), вам потрібно додати додатковий клас infinite-scroll-top до «page-content»:
<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        <div class="preloader infinite-scroll-preloader"></div>
        ...
    </div>
</div>

Методи застосунку Infinite Scroll

Існує два методи застосунку, які можна використовувати з контейнером нескінченної прокрутки:

  • Додавання слухача подій: app.infiniteScroll.create(el)

    — el: HTMLElement | CSSSelector — елемент із нескінченним прокручуванням (.infinite-scroll-content).

  • Видалення слухача подій: app.infiniteScroll.destroy(el)

    — el: HTMLElement | CSSSelector — елемент із нескінченним прокручуванням (.infinite-scroll-content).
Використовуйте ці методи, лише якщо ви додали нескінченне прокручування вмісту після ініціалізації сторінки або якщо ви хочете ввімкнути його пізніше. Інакше, якщо на сторінці init є елемент "infinite-scroll-content", він буде створений автоматично

Події нескінченного прокручування

Infinite Scroll запускає такі події DOM в екземплярі застосунку:

Події Dom

ПодіяОб'єктОписТип
infinite
Контейнер Infinite Scroll

<div class="page-content infinite-scroll-content">

Подія буде ініційована, коли прокручування сторінки досягне вказаної (в атрибуті data-infinite-distance) відстані до низу.
string

Події застосунку

Компонент нескінченної прокрутки генерує події в екземплярі застосунку, а також в елементі DOM.
ПодіяАргументОписТип
infinite
(el, event)
Подія буде ініційована, коли прокручування сторінки досягне вказаної (в атрибуті data-infinite-distance) відстані до низу.
null

Приклад 

<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>