LoadMore 加载更多容器

基本使用

适用于滚动加载的场景

tsx

import { Masonry, LoadMore } from "@lite-code/shared";
import { create } from "@lite-code/reactive";

const createItem = (key: number) => ({
  key,
  height: Math.floor(Math.random() * (300 - 50) + 50), // 随机高度 50-300
  style: {
    backgroundColor: `hsl(${Math.random() * 360}, 70%, 80%)`,
  },
  content: <span style={{color: "#333"}}>item: {key + 1}</span>,
});

const store = create({
  items: Array.from({ length: 10 }).map((_, i) => createItem(i)),
  loading: false,
  hasMore: true,
});

export default () => {
  const snap = store.useSnapshot();
  return (
    <LoadMore
      height={500} // 必须给定高度
      loading={snap.loading}
      hasMore={snap.hasMore}
      onLoad={async () => {
        store.loading = true;
        await new Promise((res) => setTimeout(res, 1000));
        if (snap.items.length >= 50) {
          store.hasMore = false;
          store.loading = false;
          return;
        }
        store.loading = false;
        store.items.push(
          ...Array.from({ length: 10 }).map((_, i) =>
            createItem(snap.items.length + i)
          )
        );
        store.items = [...store.items];
      }}
      threshold={50}
    >
      <Masonry items={snap.items} style={{ padding: 10 }} columnCount={4} />
    </LoadMore>
  );
};