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)- додати слухач подій нескінченної прокрутки до вказаного елемента HTML

● el - HTMLElement or string (з CSS-селектором) - контейнер нескінченної прокрутки. Є обов'язковим

app.infiniteScroll.destroy(el)- видалити прослуховувач подій нескінченної прокрутки з указаного контейнера HTML

● el - HTMLElement or string (з CSS-селектором) - контейнер нескінченної прокрутки. Є обов'язковим

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

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

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

Події Dom

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

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

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

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

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

Приклад 

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

Techno4 Framework