InfiniteScroll

上下ページング · sort-key マージ · max-items ウィンドウ

Preview

フィード風リスト

下端・上端付近で追加取得。ウィンドウは最大 20 件。

HTML

<tw-infinite-scroll
  id="is-demo"
  sort-key="updated_at"
  sort-direction="desc"
  max-items="20"
></tw-infinite-scroll>

import "@b4moss/the-wheels";

const el = document.getElementById("is-demo");
el.loadItems = async ({ direction, page }) => {
  /* fetch page… */
  return { items: [/* … */], hasMore: true, nextPage: Number(page) + 1 };
};
el.refresh();

import "@b4moss/the-wheels";
import type { TwInfiniteScroll } from "@b4moss/the-wheels";

const el = document.getElementById("is-demo") as TwInfiniteScroll;
el.loadItems = async ({ direction, page }) => {
  return { items: [], hasMore: false };
};
await el.refresh();