Preview Updated 2026-05-10

InfiniteScroll

Auto-loads the next page when scrolled to the bottom; based on IntersectionObserver.

Basic usage

Place the list inside the component slot. When the bottom sentinel enters the viewport (threshold pixels in advance), load fires. loading suppresses repeat triggers, and finished shows “no more results”.

背景

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

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

<CfInfiniteScroll loading={loading} finished={finished} onLoad={loadMore}>
<ul>...</ul>
</CfInfiniteScroll>

API

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Loading; `load` will not fire while true
`finished`	`boolean`	`false`	No more data
`threshold`	`number`	`100`	Fire when the sentinel is N pixels away from entering the viewport (rootMargin)

Events: onLoad() — load the next batch in the handler.

Slots (Vue): loading / finished for custom bottom hint text.