贊助成為贊助者

無限捲動

無限捲動允許在頁面捲動接近底部時載入額外內容或執行任何其他必要的動作。

無限捲動版面

若要啟用無限捲動，您需要將額外的 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>

其中

頂端的無限捲動

如果您需要在頁面頂端使用無限捲動（當捲動到頂端時），您需要將額外的 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>

無限捲動應用程式方法

有兩種應用程式方法可用於無限捲動容器

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>
改善此文件
在此頁面上