开发预览更新于 2026-05-10

InfiniteScroll 无限滚动

滚动到底部时自动触发加载下一页，基于 IntersectionObserver。

基础用法

把列表放在组件 slot 内即可；当组件底部的 sentinel 进入视口（提前 threshold 像素）时触发 load。loading 抑制重复触发，finished 显示「没有更多了」。

背景视口

第 1 项
第 2 项
第 3 项
第 4 项
第 5 项
第 6 项
第 7 项
第 8 项
第 9 项
第 10 项
第 11 项
第 12 项

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfInfiniteScroll } from '@chufix-design/vue';

const items = ref<number[]>(Array.from({ length: 12 }, (_, i) => i + 1));
const loading = ref(false);
const finished = ref(false);

function loadMore() {
  if (loading.value || finished.value) return;
  loading.value = true;
  setTimeout(() => {
    const start = items.value.length + 1;
    items.value.push(...Array.from({ length: 12 }, (_, i) => start + i));
    loading.value = false;
    if (items.value.length >= 60) finished.value = true;
  }, 600);
}
</script>
<template>
  <div style="height: 280px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 8px;">
    <CfInfiniteScroll
      :loading="loading"
      :finished="finished"
      :threshold="80"
      @load="loadMore"
    >
      <ul style="margin: 0; padding: 0; list-style: none; display: grid; gap: 4px;">
        <li
          v-for="i in items"
          :key="i"
          style="padding: 8px 12px; background: var(--bg-2); border-radius: 4px;"
        >第 {{ i }} 项</li>
      </ul>
    </CfInfiniteScroll>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfInfiniteScroll } from '@chufix-design/vue';

const items = ref<number[]>(Array.from({ length: 12 }, (_, i) => i + 1));
const loading = ref(false);
const finished = ref(false);

function loadMore() {
  if (loading.value || finished.value) return;
  loading.value = true;
  setTimeout(() => {
    const start = items.value.length + 1;
    items.value.push(...Array.from({ length: 12 }, (_, i) => start + i));
    loading.value = false;
    if (items.value.length >= 60) finished.value = true;
  }, 600);
}
</script>
<template>
  <div style="height: 280px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 8px;">
    <CfInfiniteScroll
      :loading="loading"
      :finished="finished"
      :threshold="80"
      @load="loadMore"
    >
      <ul style="margin: 0; padding: 0; list-style: none; display: grid; gap: 4px;">
        <li
          v-for="i in items"
          :key="i"
          style="padding: 8px 12px; background: var(--bg-2); border-radius: 4px;"
        >第 {{ i }} 项</li>
      </ul>
    </CfInfiniteScroll>
  </div>
</template>

import { useState } from 'react';
import { CfInfiniteScroll } from '@chufix-design/react';

export default function Demo() {
  const [items, setItems] = useState<number[]>(Array.from({ length: 12 }, (_, i) => i + 1));
  const [loading, setLoading] = useState(false);
  const [finished, setFinished] = useState(false);

  function loadMore() {
    if (loading || finished) return;
    setLoading(true);
    setTimeout(() => {
      const start = items.length + 1;
      items.push(...Array.from({ length: 12 }, (_, i) => start + i));
      setLoading(false);
      if (items.length >= 60) setFinished(true);
    }, 600);
  }
  return (
    <>
      <div style={{ height: 280, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 8 }}>
          <CfInfiniteScroll loading={loading} finished={finished} threshold={80} onLoad={loadMore} >
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 4 }}>
              <li v-for="i in items" key={i} style={{ padding: "8px 12px", background: "var(--bg-2)", borderRadius: 4 }} >第 {i} 项</li>
            </ul>
          </CfInfiniteScroll>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfInfiniteScroll } from '@chufix-design/react';

export default function Demo() {
  const [items, setItems] = useState<number[]>(Array.from({ length: 12 }, (_, i) => i + 1));
  const [loading, setLoading] = useState(false);
  const [finished, setFinished] = useState(false);

  function loadMore() {
    if (loading || finished) return;
    setLoading(true);
    setTimeout(() => {
      const start = items.length + 1;
      items.push(...Array.from({ length: 12 }, (_, i) => start + i));
      setLoading(false);
      if (items.length >= 60) setFinished(true);
    }, 600);
  }
  return (
    <>
      <div style={{ height: 280, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 8 }}>
          <CfInfiniteScroll loading={loading} finished={finished} threshold={80} onLoad={loadMore} >
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 4 }}>
              <li v-for="i in items" key={i} style={{ padding: "8px 12px", background: "var(--bg-2)", borderRadius: 4 }} >第 {i} 项</li>
            </ul>
          </CfInfiniteScroll>
        </div>
    </>
  );
}

API

属性	类型	默认值	说明
`loading`	`boolean`	`false`	加载中，期间不再触发 `load`
`finished`	`boolean`	`false`	已无更多数据
`threshold`	`number`	`100`	sentinel 进入视口前 N 像素就触发（rootMargin）

Events

Vue 事件	React 回调	载荷类型	说明
`load`	`onLoad`	—	sentinel 进入视口时触发；应在此回调内加载下一批数据

Slots

Slot	说明
`default`	列表内容
`loading`	自定义「加载中」提示
`finished`	自定义「没有更多了」提示