使用场景
在有限视窗内渲染可见项目，减少长列表的挂载量。
契约与组合
这是虚拟列表基础入口，只渲染可见范围与 cache 缓冲。提供固定 height / width 和 total / data，默认插槽的 style 必须放在真实项目根节点上，否则绝对位置与尺寸计算无法生效。插槽提供 index / style / data / isScrolling。
itemSize 是尺寸函数；estimatedItemSize 用于尚未测算范围。列表未提供 resetAfterIndex 公开方法；改变尺寸函数结果时，以 key 重建尺寸缓存并用 scrollTo 恢复原滚动位置，边界示例完整演示这一流程。
通过公开方法定位列表，支持水平或垂直布局。 完整说明。
这些低层入口没有表格列注册或独立选择模型，也没有额外四档 size；行列尺寸由宿主决定，颜色、间距和字体来自 ASAM tokens。
基础用法与状态
基础用法与状态
<template>
<AsamDynamicSizeList
v-bind="{
height: 200,
width: 280,
total: items.length,
data: items,
itemSize,
estimatedItemSize: 50
}"
>
<template #default="{ index, data, style }">
<div :style="style" class="virtual-cell">{{ data[index] }}</div>
</template>
</AsamDynamicSizeList>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDynamicSizeListBasicDemo' });
import { AsamDynamicSizeList } from '@asam-ui/ui';
const items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));
const itemSize = (index: number): number => (index % 2 === 0 ? 40 : 60);
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style><template>
<AsamDynamicSizeList
v-bind="{
height: 200,
width: 280,
total: items.length,
data: items,
itemSize,
estimatedItemSize: 50
}"
>
<template #default="{ index, data, style }">
<div :style="style" class="virtual-cell">{{ data[index] }}</div>
</template>
</AsamDynamicSizeList>
</template>
<script setup>
defineOptions({ name: 'AsamDynamicSizeListBasicDemo' });
import { AsamDynamicSizeList } from '@asam-ui/ui';
const items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));
const itemSize = (index) => (index % 2 === 0 ? 40 : 60);
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>首尾定位、动态尺寸、RTL 与滚动条
首尾定位、动态尺寸、RTL 与滚动条
<template>
<div class="demo-root-layout">
<AsamButton native-type="submit" type="default" @click="list?.scrollToItem(99, 'end')"
>到最后一项</AsamButton
>
<AsamButton native-type="submit" type="default" @click="list?.resetScrollTop()"
>返回起点</AsamButton
>
<AsamButton native-type="submit" type="default" @click="resize">改变项目尺寸</AsamButton>
<AsamCheckboxItem v-model="horizontal">水平布局</AsamCheckboxItem>
<AsamCheckboxItem v-model="rtl">RTL</AsamCheckboxItem>
<AsamCheckboxItem v-model="always">滚动条持续显示</AsamCheckboxItem>
<p class="example-paragraph" data-testid="virtual-events">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>
<AsamDynamicSizeList
:key="[revision, horizontal, rtl].join(':')"
ref="list"
:data="items"
:height="200"
:width="320"
:total="items.length"
:item-size="itemSize"
:estimated-item-size="50"
:layout="horizontal ? 'horizontal' : 'vertical'"
:direction="rtl ? 'rtl' : 'ltr'"
:scrollbar-always-on="always"
:use-is-scrolling="true"
@item-rendered="onRendered"
@scroll="onScroll"
@end-reached="edge = $event"
>
<template #default="{ index, style, isScrolling }">
<div :style="style" class="virtual-cell" :data-index="index">
{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}
</div>
</template>
</AsamDynamicSizeList>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDynamicSizeListBoundaryDemo' });
import { nextTick, ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamDynamicSizeList } from '@asam-ui/ui';
import type { AsamDynamicSizeListExpose, AsamDynamicSizeListEmits } from '@asam-ui/ui';
const list = ref<AsamDynamicSizeListExpose>();
const items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));
const horizontal = ref(false);
const rtl = ref(false);
const always = ref(true);
const revision = ref(0);
const eventState = ref('');
const edge = ref('');
const onScroll = (...[direction, offset, requested]: AsamDynamicSizeListEmits['scroll']): void => {
eventState.value = direction + ':' + offset + ':' + requested;
};
const onRendered = (
...[start, end, first, last]: AsamDynamicSizeListEmits['itemRendered']
): void => {
range.value = start + ':' + end + ':' + first + ':' + last;
};
const range = ref('');
const large = ref(false);
const itemSize = (index: number): number => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);
async function resize(): Promise<void> {
const offset = list.value?.states.scrollOffset ?? 0;
large.value = !large.value;
revision.value++;
await nextTick();
list.value?.scrollTo(offset);
}
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="demo-root-layout">
<AsamButton native-type="submit" type="default" @click="list?.scrollToItem(99, 'end')"
>到最后一项</AsamButton
>
<AsamButton native-type="submit" type="default" @click="list?.resetScrollTop()"
>返回起点</AsamButton
>
<AsamButton native-type="submit" type="default" @click="resize">改变项目尺寸</AsamButton>
<AsamCheckboxItem v-model="horizontal">水平布局</AsamCheckboxItem>
<AsamCheckboxItem v-model="rtl">RTL</AsamCheckboxItem>
<AsamCheckboxItem v-model="always">滚动条持续显示</AsamCheckboxItem>
<p class="example-paragraph" data-testid="virtual-events">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>
<AsamDynamicSizeList
:key="[revision, horizontal, rtl].join(':')"
ref="list"
:data="items"
:height="200"
:width="320"
:total="items.length"
:item-size="itemSize"
:estimated-item-size="50"
:layout="horizontal ? 'horizontal' : 'vertical'"
:direction="rtl ? 'rtl' : 'ltr'"
:scrollbar-always-on="always"
:use-is-scrolling="true"
@item-rendered="onRendered"
@scroll="onScroll"
@end-reached="edge = $event"
>
<template #default="{ index, style, isScrolling }">
<div :style="style" class="virtual-cell" :data-index="index">
{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}
</div>
</template>
</AsamDynamicSizeList>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDynamicSizeListBoundaryDemo' });
import { nextTick, ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamDynamicSizeList } from '@asam-ui/ui';
const list = ref();
const items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));
const horizontal = ref(false);
const rtl = ref(false);
const always = ref(true);
const revision = ref(0);
const eventState = ref('');
const edge = ref('');
const onScroll = (...[direction, offset, requested]) => {
eventState.value = direction + ':' + offset + ':' + requested;
};
const onRendered = (...[start, end, first, last]) => {
range.value = start + ':' + end + ':' + first + ':' + last;
};
const range = ref('');
const large = ref(false);
const itemSize = (index) => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);
async function resize() {
const offset = list.value?.states.scrollOffset ?? 0;
large.value = !large.value;
revision.value++;
await nextTick();
list.value?.scrollTo(offset);
}
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>实例、类型与边界
公开 API 与下列完整 SFC 来自同一组件入口。TS 和 JS 演示分别提供所有本地依赖文件；类型约束只出现在 TS 中。远程请求与业务持久化由宿主承担。
API
属性 AsamDynamicSizeListProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamDynamicSizeListProps)["style"] | undefined |
className | — | AsamDynamicSizeListProps["className"] | "" |
width | — | (AsamDynamicSizeListProps)["width"] | — |
data | — | any[] | undefined | 工厂函数（每个实例创建） |
height | — | (AsamDynamicSizeListProps)["height"] | — |
scrollbarAlwaysOn | — | boolean | undefined | false |
layout | — | enum"horizontal" | "vertical"完整类型：(AsamDynamicSizeListProps)["layout"] | "vertical" |
containerElement | — | (AsamDynamicSizeListProps)["containerElement"] | "div" |
direction | — | enum"ltr" | "rtl"完整类型：(AsamDynamicSizeListProps)["direction"] | "ltr" |
innerElement | — | (AsamDynamicSizeListProps)["innerElement"] | "div" |
innerProps | — | Record<string, unknown> | undefined | 工厂函数（每个实例创建） |
useIsScrolling | — | boolean | undefined | false |
innerWidth | — | (AsamDynamicSizeListProps)["innerWidth"] | — |
perfMode | — | (AsamDynamicSizeListProps)["perfMode"] | true |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamDynamicSizeListProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamDynamicSizeListProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamDynamicSizeListProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamDynamicSizeListProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamDynamicSizeListProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamDynamicSizeListProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
cache | — | number | undefined | 2 |
estimatedItemSize | — | number | undefined | — |
initScrollOffset | — | number | undefined | 0 |
total | — | number | — |
itemSize | — | (index: number) => number | — |
onItemRendered | — | ((cacheStart: number, cacheEnd: number, visibleStart: number, visibleEnd: number) => void) | undefined | — |
onScroll | — | ((direction: "forward" | "backward", offset: number, updateRequested: boolean) => void) | undefined | — |
onEndReached | — | ((edge: "top" | "bottom" | "right" | "left") => void) | undefined | — |
onEnd-reached | — | ((edge: "top" | "bottom" | "right" | "left") => void) | undefined | — |
实例方法与状态 AsamDynamicSizeListExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
scrollTo | — | (offset: number) => void | — |
states | — | (AsamDynamicSizeListExpose)["states"] | — |
scrollToItem | — | (idx: number, alignment?: AsamDynamicSizeGridAlignment) => void | — |
windowRef | — | AsamDynamicSizeListExpose["windowRef"] | — |
innerRef | — | AsamDynamicSizeListExpose["windowRef"] | — |
getItemStyleCache | — | (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties> | — |
resetScrollTop | — | () => void | — |
类型 AsamDynamicSizeListInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
scrollTo | — | (offset: number) => void | — |
states | — | (AsamDynamicSizeListInstance)["states"] | — |
scrollToItem | — | (idx: number, alignment?: AsamDynamicSizeGridAlignment) => void | — |
windowRef | — | AsamDynamicSizeListExpose["windowRef"] | — |
innerRef | — | AsamDynamicSizeListExpose["windowRef"] | — |
getItemStyleCache | — | (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties> | — |
resetScrollTop | — | () => void | — |
插槽 AsamDynamicSizeListSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | ((scope: { data: unknown[]; index: number; isScrolling?: boolean; style: CSSProperties; }) => VNode[]) | undefined | — |
事件 AsamDynamicSizeListEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
itemRendered | — | [cacheStart: number, cacheEnd: number, visibleStart: number, visibleEnd: number] | — |
scroll | — | [direction: "forward" | "backward", offset: number, updateRequested: boolean] | — |
end-reached | — | [edge: "top" | "bottom" | "right" | "left"] | — |
更多参数与事件说明
契约与组合
scrollTo(offset) / scrollToItem(index,alignment) / resetScrollTop() 支持公开定位；alignment 可以为 start / center / end / auto / smart（以本入口类型为准）。direction 支持 ltr / rtl，layout 支持 vertical / horizontal。scrollbarAlwaysOn 控制持续显示；useIsScrolling 决定插槽是否读取滚动中状态。末端定位、尺寸切换和 RTL 都保留首尾项目可达。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
style
必填：否；声明来源：上游声明。
style 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）className
必填：否；声明来源：上游声明。
className 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
""（已安装运行时；已安装组件）width
必填：否；声明来源：上游声明。
data
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）height
必填：是；声明来源：上游声明。
height 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
scrollbarAlwaysOn
必填：否；声明来源：上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）layout
必填：否；声明来源：上游声明。
layout 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
默认值与来源
"vertical"（已安装运行时；已安装组件）containerElement
必填：否；声明来源：上游声明。
containerElement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
"div"（已安装运行时；已安装组件）direction
必填：否；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："ltr" / "rtl"
默认值与来源
"ltr"（已安装运行时；已安装组件）innerElement
必填：否；声明来源：上游声明。
默认值与来源
"div"（已安装运行时；已安装组件）innerProps
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）useIsScrolling
必填：否；声明来源：上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）innerWidth
必填：否；声明来源：上游声明。
perfMode
必填：否；声明来源：上游声明。
perfMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
cache
必填：否；声明来源：上游声明。
默认值与来源
2（已安装运行时；已安装组件）estimatedItemSize
必填：否；声明来源：上游声明。
initScrollOffset
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）total
必填：是；声明来源：上游声明。
itemSize
必填：是；声明来源：ASAM 声明。
itemSize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): number
onItemRendered
必填：否；声明来源：ASAM 声明。
onItemRendered 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [cacheStart: number, cacheEnd: number, visibleStart: number, visibleEnd: number]): void
onScroll
必填：否；声明来源：ASAM 声明。
onScroll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [direction: "forward" | "backward", offset: number, updateRequested: boolean]): void
onEndReached
必填：否；声明来源：ASAM 声明。
onEndReached 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [edge: "top" | "bottom" | "right" | "left"]): void
onEnd-reached
必填：否；声明来源：ASAM 声明。
onEnd-reached 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [edge: "top" | "bottom" | "right" | "left"]): void
AsamDynamicSizeListProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamDynamicSizeListProps, AsamDynamicSizeListEmits } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDynamicSizeListProps
type PublicContract = {
readonly "style"?: (AsamDynamicSizeListProps)["style"];
readonly "className"?: AsamDynamicSizeListProps["className"];
readonly "width"?: (AsamDynamicSizeListProps)["width"];
readonly "data"?: any[] | undefined;
readonly "height": (AsamDynamicSizeListProps)["height"];
readonly "scrollbarAlwaysOn"?: boolean | undefined;
readonly "layout"?: (AsamDynamicSizeListProps)["layout"];
readonly "containerElement"?: (AsamDynamicSizeListProps)["containerElement"];
readonly "direction"?: (AsamDynamicSizeListProps)["direction"];
readonly "innerElement"?: (AsamDynamicSizeListProps)["innerElement"];
readonly "innerProps"?: Record<string, unknown> | undefined;
readonly "useIsScrolling"?: boolean | undefined;
readonly "innerWidth"?: (AsamDynamicSizeListProps)["innerWidth"];
readonly "perfMode"?: (AsamDynamicSizeListProps)["perfMode"];
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamDynamicSizeListProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamDynamicSizeListProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamDynamicSizeListProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamDynamicSizeListProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamDynamicSizeListProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamDynamicSizeListProps)["onVnodeUnmounted"];
"class"?: unknown;
readonly "cache"?: number | undefined;
readonly "estimatedItemSize"?: number | undefined;
readonly "initScrollOffset"?: number | undefined;
readonly "total": number;
"itemSize": (index: number) => number;
"onItemRendered"?: ((cacheStart: number, cacheEnd: number, visibleStart: number, visibleEnd: number) => void) | undefined;
"onScroll"?: ((direction: "forward" | "backward", offset: number, updateRequested: boolean) => void) | undefined;
"onEndReached"?: ((edge: "top" | "bottom" | "right" | "left") => void) | undefined;
"onEnd-reached"?: ((edge: "top" | "bottom" | "right" | "left") => void) | undefined;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
scrollTo
必填：是；声明来源：上游声明。
scrollTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(offset: number): void
states
必填：是；声明来源：上游声明。
states 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
scrollToItem
必填：是；声明来源：上游声明。
scrollToItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(idx: number, alignment?: AsamDynamicSizeGridAlignment | undefined): void
windowRef
必填：是；声明来源：上游声明。
windowRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
innerRef
必填：是；声明来源：上游声明。
innerRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
getItemStyleCache
必填：是；声明来源：ASAM 声明。
getItemStyleCache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key?: unknown, size?: unknown, direction?: unknown): Record<string, CSSProperties>
resetScrollTop
必填：是；声明来源：ASAM 声明。
resetScrollTop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamDynamicSizeListExpose 公开类型视图
import type { CSSProperties } from 'vue';
import type { AsamDynamicSizeListExpose, AsamDynamicSizeListProps, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
// AsamDynamicSizeListExpose
type PublicContract = {
"scrollTo": (offset: number) => void;
"states": (AsamDynamicSizeListExpose)["states"];
"scrollToItem": (idx: number, alignment?: AsamDynamicSizeGridAlignment) => void;
"windowRef": AsamDynamicSizeListExpose["windowRef"];
"innerRef": AsamDynamicSizeListExpose["windowRef"];
"getItemStyleCache": (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties>;
"resetScrollTop": () => void;
};参数与事件说明
scrollTo
必填：是；声明来源：上游声明。
scrollTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(offset: number): void
states
必填：是；声明来源：上游声明。
states 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
scrollToItem
必填：是；声明来源：上游声明。
scrollToItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(idx: number, alignment?: AsamDynamicSizeGridAlignment | undefined): void
windowRef
必填：是；声明来源：上游声明。
windowRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
innerRef
必填：是；声明来源：上游声明。
innerRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
getItemStyleCache
必填：是；声明来源：ASAM 声明。
getItemStyleCache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key?: unknown, size?: unknown, direction?: unknown): Record<string, CSSProperties>
resetScrollTop
必填：是；声明来源：ASAM 声明。
resetScrollTop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamDynamicSizeListInstance 公开类型视图
import type { CSSProperties } from 'vue';
import type { AsamDynamicSizeListInstance, AsamDynamicSizeListExpose, AsamDynamicSizeListProps, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
// AsamDynamicSizeListInstance
type PublicContract = {
"scrollTo": (offset: number) => void;
"states": (AsamDynamicSizeListInstance)["states"];
"scrollToItem": (idx: number, alignment?: AsamDynamicSizeGridAlignment) => void;
"windowRef": AsamDynamicSizeListExpose["windowRef"];
"innerRef": AsamDynamicSizeListExpose["windowRef"];
"getItemStyleCache": (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties>;
"resetScrollTop": () => void;
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { data: unknown[]; index: number; isScrolling?: boolean; style: CSSProperties; }): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamDynamicSizeListSlots 公开类型视图
import type { CSSProperties, VNode } from 'vue';
import type { AsamDynamicSizeListSlots } from '@asam-ui/ui';
// AsamDynamicSizeListSlots
type PublicContract = {
"default"?: ((scope: { data: unknown[]; index: number; isScrolling?: boolean; style: CSSProperties; }) => VNode[]) | undefined;
};参数与事件说明
itemRendered
必填：是；声明来源：ASAM 声明。
scroll
必填：是；声明来源：ASAM 声明。
end-reached
必填：是；声明来源：ASAM 声明。
AsamDynamicSizeListEmits 公开类型视图
import type { AsamDynamicSizeListEmits } from '@asam-ui/ui';
// AsamDynamicSizeListEmits
type PublicContract = {
"itemRendered": [cacheStart: number, cacheEnd: number, visibleStart: number, visibleEnd: number];
"scroll": [direction: "forward" | "backward", offset: number, updateRequested: boolean];
"end-reached": [edge: "top" | "bottom" | "right" | "left"];
};