Loadable

基于 IntersectionObserver 的无限滚动容器。组件自身不渲染 wrapper,只把 slot 内容和一个哨兵元素依次挂到父容器里——当哨兵进入浏览器视口(距离底部 120px 提前)时触发 load。

布局和滚动都由父容器提供

Loadable 只是"在末尾插一个哨兵",flex-col / grid / overflow-auto 的高度限定都要写在外层 wrapper 上。class prop 只控制加载中 spinner 的样式。

基本用法

有界盒内滚动加载

外层 wrapper 设定固定高度 + overflow-y-auto,用户在盒子内滚动,哨兵进入视口时追加 5 项,最多 30 项。

列表项 0

列表项 1

列表项 2

列表项 3

列表项 4

已加载 5 / 30 项

<script setup lang="ts">
import { Loadable } from '@tripo3d/design';
import { ref } from 'vue';

const items = ref<number[]>(Array.from({ length: 5 }, (_, i) => i));

async function load() {
  if (items.value.length >= 30) return;
  await new Promise(r => setTimeout(r, 500));
  const start = items.value.length;
  for (let i = 0; i < 5; i++) items.value.push(start + i);
}
</script>

<template>
  <!-- 关键:外层 wrapper 提供 flex-col + 固定高度 + overflow-y-auto -->
  <div class="flex flex-col gap-1 h-60 overflow-y-auto">
    <Loadable :load="load">
      <div
        v-for="item in items"
        :key="item"
        class="h-10 shrink-0 flex items-center px-3"
      >
        列表项 {{ item }}
      </div>
    </Loadable>
  </div>
</template>

API

Props

名称	类型	默认值	说明
load必填	() => any	—	触发加载的异步函数,返回 Promise。调用期间不会并发重复触发
class	string	—	加载中 spinner 外层容器的 class(注意:不是列表 wrapper)

Slots

插槽	作用域	说明
default	—	列表内容,直接作为父容器的子节点渲染

渲染结构

• (你的 wrapper)提供 flex-col / grid / overflow-auto / 高度等布局
  • slot 内容你渲染的每一个列表项
  • 哨兵 div组件在末尾追加的空 div;加载中渲染 LoadingIcon

行为细节

• IntersectionObserver 配置为 root: null、rootMargin: '0px 0px 120px 0px':以浏览器视口为基准,距离底部 120px 提前触发,减少加载空白
• 只要 wrapper 本身位于视口内,内部 overflow 滚动也能触发 —— getBoundingClientRect() 会反映滚动偏移
• 加载期间标记 loading = true,阻止并发;出错写到 console.error 后重置状态
• 组件不自带列表语义,纯列表场景请在 wrapper 上设 role="list"、子项设 role="listitem"