无限滚动指令 AsamInfiniteScroll

使用场景

在滚动容器接近末尾时请求追加内容。

契约与组合

这是 v-asam-infinite-scroll 指令；在 script setup 中导入 AsamInfiniteScroll as vAsamInfiniteScroll，或通过插件注册使用。完整说明。

滚动容器可以是指令元素或最近的可滚动父元素。完整说明。

卸载由原生清理 scroll 监听和不足一屏观察器；原生已排队节流、以及 mounted 等待 nextTick 期间发生卸载的行为均保持上游实现，ASAM 不增加异步清理或禁止迟到回调的保证。完整说明。

基础用法与状态

vue

<template>
	<AsamCheckboxItem v-model="paused"> 暂停追加</AsamCheckboxItem>
	<ul
		v-asam-infinite-scroll="load"
		:infinite-scroll-disabled="disabled"
		:infinite-scroll-distance="16"
		:infinite-scroll-immediate="false"
		class="scroll-list"
	>
		<li v-for="item in count" :key="item">记录 {{ item }}</li>
	</ul>
	<p class="example-paragraph" role="status">{{ loading ? '正在追加' : count >= 30 ? '已经到底' : '可继续滚动' }}</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamInfiniteScrollBasicDemo' });
import { ref, computed, onBeforeUnmount } from 'vue';
import { AsamCheckboxItem, AsamInfiniteScroll as vAsamInfiniteScroll } from '@asam-ui/ui';
const count = ref(12);
const paused = ref(false);
const loading = ref(false);
const disabled = computed(() => paused.value || loading.value || count.value >= 30);
let timer: ReturnType<typeof setTimeout> | undefined;
const load = () => {
	if (disabled.value) return;
	loading.value = true;
	timer = setTimeout(() => {
		count.value = Math.min(count.value + 6, 30);
		loading.value = false;
	}, 250);
};
onBeforeUnmount(() => clearTimeout(timer));
</script>

<style scoped>
.scroll-list {
	height: 160px;
	overflow: auto;
	border: 1px solid var(--asam-color-border);
}

.scroll-list li {
	padding: var(--asam-space-sm);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<AsamCheckboxItem v-model="paused"> 暂停追加</AsamCheckboxItem>
	<ul
		v-asam-infinite-scroll="load"
		:infinite-scroll-disabled="disabled"
		:infinite-scroll-distance="16"
		:infinite-scroll-immediate="false"
		class="scroll-list"
	>
		<li v-for="item in count" :key="item">记录 {{ item }}</li>
	</ul>
	<p class="example-paragraph" role="status">{{ loading ? '正在追加' : count >= 30 ? '已经到底' : '可继续滚动' }}</p>
</template>

<script setup>
defineOptions({ name: 'AsamInfiniteScrollBasicDemo' });
import { ref, computed, onBeforeUnmount } from 'vue';
import { AsamCheckboxItem, AsamInfiniteScroll as vAsamInfiniteScroll } from '@asam-ui/ui';
const count = ref(12);
const paused = ref(false);
const loading = ref(false);
const disabled = computed(() => paused.value || loading.value || count.value >= 30);
let timer;
const load = () => {
	if (disabled.value) return;
	loading.value = true;
	timer = setTimeout(() => {
		count.value = Math.min(count.value + 6, 30);
		loading.value = false;
	}, 250);
};
onBeforeUnmount(() => clearTimeout(timer));
</script>

<style scoped>
.scroll-list {
	height: 160px;
	overflow: auto;
	border: 1px solid var(--asam-color-border);
}

.scroll-list li {
	padding: var(--asam-space-sm);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

立即填充与嵌套滚动容器

vue

<template>
	<div class="demo-root-layout">
		<AsamCheckboxItem v-model="paused">暂停加载</AsamCheckboxItem>
		<AsamButton native-type="submit" type="default" @click="reset">清空后重新填充</AsamButton>
		<AsamButton native-type="submit" type="default" @click="secondary = !secondary"
			>切换宿主加载分派</AsamButton
		>
		<div class="scroll-parent">
			<ul
				:key="generation"
				v-asam-infinite-scroll="loadCallback"
				:infinite-scroll-delay="80"
				:infinite-scroll-distance="24"
				:infinite-scroll-disabled="disabled"
				:infinite-scroll-immediate="true"
			>
				<li v-for="id in count" :key="id">记录 {{ id }}</li>
			</ul>
		</div>
		<p class="example-paragraph" role="status">
			{{ loading ? '正在加载' : '可加载' }}；{{ count }} 条；调用 {{ calls }} 次
		</p>
		<p class="example-paragraph">
			当前函数 {{ secondary ? '第二加载函数' : '第一加载函数' }}；最近调用 {{ lastCallback }}
		</p>
	</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamInfiniteScrollImmediateDemo' });
import { computed, onBeforeUnmount, ref } from 'vue';
import {
	AsamCheckboxItem,
	AsamButton,
	AsamInfiniteScroll as vAsamInfiniteScroll
} from '@asam-ui/ui';
const count = ref(0);
const calls = ref(0);
const paused = ref(false);
const loading = ref(false);
const secondary = ref(false);
const lastCallback = ref('尚未调用');

const disabled = computed(() => paused.value || loading.value || count.value >= 50);
let timer: ReturnType<typeof setTimeout> | undefined;
const generation = ref(0);
function loadCallback(): void {
	load(secondary.value ? '第二加载函数' : '第一加载函数');
}
function load(source: string): void {
	if (disabled.value) return;
	lastCallback.value = source;
	loading.value = true;
	calls.value++;
	const revision = generation.value;
	timer = setTimeout(() => {
		if (revision !== generation.value) return;
		count.value = Math.min(50, count.value + 5);
		loading.value = false;
	}, 100);
}
function reset(): void {
	generation.value++;
	clearTimeout(timer);
	count.value = 0;
	loading.value = false;
}
onBeforeUnmount(() => {
	generation.value++;
	clearTimeout(timer);
});
</script>
<style scoped>
.scroll-parent {
	height: 160px;
	overflow: auto;
	border: 1px solid var(--asam-color-border);
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

li {
	min-height: 36px;
	padding: var(--asam-space-xs);
	box-sizing: border-box;
}
</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>

vue

<template>
	<div class="demo-root-layout">
		<AsamCheckboxItem v-model="paused">暂停加载</AsamCheckboxItem>
		<AsamButton native-type="submit" type="default" @click="reset">清空后重新填充</AsamButton>
		<AsamButton native-type="submit" type="default" @click="secondary = !secondary"
			>切换宿主加载分派</AsamButton
		>
		<div class="scroll-parent">
			<ul
				:key="generation"
				v-asam-infinite-scroll="loadCallback"
				:infinite-scroll-delay="80"
				:infinite-scroll-distance="24"
				:infinite-scroll-disabled="disabled"
				:infinite-scroll-immediate="true"
			>
				<li v-for="id in count" :key="id">记录 {{ id }}</li>
			</ul>
		</div>
		<p class="example-paragraph" role="status">
			{{ loading ? '正在加载' : '可加载' }}；{{ count }} 条；调用 {{ calls }} 次
		</p>
		<p class="example-paragraph">
			当前函数 {{ secondary ? '第二加载函数' : '第一加载函数' }}；最近调用 {{ lastCallback }}
		</p>
	</div>
</template>
<script setup>
defineOptions({ name: 'AsamInfiniteScrollImmediateDemo' });
import { computed, onBeforeUnmount, ref } from 'vue';
import {
	AsamCheckboxItem,
	AsamButton,
	AsamInfiniteScroll as vAsamInfiniteScroll
} from '@asam-ui/ui';
const count = ref(0);
const calls = ref(0);
const paused = ref(false);
const loading = ref(false);
const secondary = ref(false);
const lastCallback = ref('尚未调用');

const disabled = computed(() => paused.value || loading.value || count.value >= 50);
let timer;
const generation = ref(0);
function loadCallback() {
	load(secondary.value ? '第二加载函数' : '第一加载函数');
}
function load(source) {
	if (disabled.value) return;
	lastCallback.value = source;
	loading.value = true;
	calls.value++;
	const revision = generation.value;
	timer = setTimeout(() => {
		if (revision !== generation.value) return;
		count.value = Math.min(50, count.value + 5);
		loading.value = false;
	}, 100);
}
function reset() {
	generation.value++;
	clearTimeout(timer);
	count.value = 0;
	loading.value = false;
}
onBeforeUnmount(() => {
	generation.value++;
	clearTimeout(timer);
});
</script>
<style scoped>
.scroll-parent {
	height: 160px;
	overflow: auto;
	border: 1px solid var(--asam-color-border);
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

li {
	min-height: 36px;
	padding: var(--asam-space-xs);
	box-sizing: border-box;
}
</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

指令 `AsamInfiniteScroll`

属性名	说明	类型	默认值
`created`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeMount`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`mounted`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeUpdate`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`updated`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeUnmount`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`unmounted`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`getSSRProps`	—	`(typeof AsamInfiniteScroll)["getSSRProps"]`	—
`deep`	—	`boolean \| undefined`	—
`install`	—	`(app: App) => void`	—

类型 `AsamInfiniteScrollCallback`

(): void

类型 `AsamInfiniteScrollDirective`

属性名	说明	类型	默认值
`created`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeMount`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`mounted`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeUpdate`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`updated`	—	`DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`beforeUnmount`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`unmounted`	—	`DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> \| undefined`	—
`getSSRProps`	—	`(AsamInfiniteScrollDirective)["getSSRProps"]`	—
`deep`	—	`boolean \| undefined`	—
`install`	—	`(app: App) => void`	—

类型 `AsamInfiniteScrollAttributes`

属性名	说明	类型	默认值
`infinite-scroll-delay`	—	`number \| undefined`	—
`infinite-scroll-distance`	—	`number \| undefined`	—
`infinite-scroll-disabled`	—	`boolean \| undefined`	—
`infinite-scroll-immediate`	—	`boolean \| undefined`	—

用法与契约补充说明

契约与组合

这是 v-asam-infinite-scroll 指令；在 script setup 中导入 AsamInfiniteScroll as vAsamInfiniteScroll，或通过插件注册使用。指令绑定为加载函数；infinite-scroll-delay 设置节流间隔，infinite-scroll-distance 设置触发距离，infinite-scroll-disabled 在加载中、暂停或到达末页时禁止追加。infinite-scroll-immediate=true 会在内容不足一屏时继续填充；false 等待实际滚动。

契约与组合

滚动容器可以是指令元素或最近的可滚动父元素。mounted / updated / unmounted 生命周期直接使用底层 2.14.7 的指令函数，回调和 this 原样传入。固定版本捕获挂载时的加载函数，updated 不替换该函数；需要动态分派时，宿主绑定一个稳定函数并在函数体读取当前状态，或以 key 重挂指令。完整示例采用稳定函数，展示加载中、末页、暂停/恢复、空列表立即填充和嵌套滚动父容器。

契约与组合

卸载由原生清理 scroll 监听和不足一屏观察器；原生已排队节流、以及 mounted 等待 nextTick 期间发生卸载的行为均保持上游实现，ASAM 不增加异步清理或禁止迟到回调的保证。宿主需要避免重复请求，在卸载时取消自有请求或定时器，并可用自己的挂载标记拒绝失效业务请求。清空重新填充时，以 key 重挂指令恢复初始不足一屏观察器，并取消旧请求计时器；immediate 只保证初始填充，不自动重建已经释放的原生观察器。该指令在 2.14.7 已有原生弃用提示；本入口保留公开委托，替代组合见 AsamScrollbar。

参数与事件补充说明

保留基础生命周期函数与回调绑定行为。

参数与事件说明

`created`

必填：否；声明来源：依赖声明。

created 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeMount`

必填：否；声明来源：依赖声明。

beforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`mounted`

必填：否；声明来源：依赖声明。

mounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeUpdate`

必填：否；声明来源：依赖声明。

beforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void

`updated`

必填：否；声明来源：依赖声明。

updated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`beforeUnmount`

必填：否；声明来源：依赖声明。

beforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`unmounted`

必填：否；声明来源：依赖声明。

unmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`getSSRProps`

必填：否；声明来源：依赖声明。

getSSRProps 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(typeof AsamInfiniteScroll)["getSSRProps"]>, (...args: never[]) => unknown>>

`deep`

必填：否；声明来源：依赖声明。

deep 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`install`

必填：是；声明来源：ASAM 声明。

install 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(app: App<any>): void

AsamInfiniteScroll 公开类型视图

import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamInfiniteScrollCallback, AsamInfiniteScrollDirective } from '@asam-ui/ui';
import { AsamInfiniteScroll } from '@asam-ui/ui';

// AsamInfiniteScroll
type PublicContract = {
	"created"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeMount"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"mounted"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"unmounted"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"getSSRProps"?: (typeof AsamInfiniteScroll)["getSSRProps"];
	"deep"?: boolean | undefined;
	"install": (app: App) => void;
};

AsamInfiniteScrollCallback 公开类型视图

import type { AsamInfiniteScrollCallback } from '@asam-ui/ui';

// AsamInfiniteScrollCallback
type PublicContract = {
	(): void;
};

参数与事件说明

`created`

必填：否；声明来源：依赖声明。

created 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeMount`

必填：否；声明来源：依赖声明。

beforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`mounted`

必填：否；声明来源：依赖声明。

mounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`beforeUpdate`

必填：否；声明来源：依赖声明。

beforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`updated`

必填：否；声明来源：依赖声明。

updated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`beforeUnmount`

必填：否；声明来源：依赖声明。

beforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`unmounted`

必填：否；声明来源：依赖声明。

unmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void

`getSSRProps`

必填：否；声明来源：依赖声明。

getSSRProps 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(binding: DirectiveBinding<AsamInfiniteScrollCallback, string, unknown>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(AsamInfiniteScrollDirective)["getSSRProps"]>, (...args: never[]) => unknown>>

`deep`

必填：否；声明来源：依赖声明。

deep 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`install`

必填：是；声明来源：ASAM 声明。

install 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(app: App<any>): void

AsamInfiniteScrollDirective 公开类型视图

import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamInfiniteScrollDirective, AsamInfiniteScrollCallback } from '@asam-ui/ui';

// AsamInfiniteScrollDirective
type PublicContract = {
	"created"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeMount"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"mounted"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"unmounted"?: DirectiveHook<HTMLElement, null, AsamInfiniteScrollCallback, string, unknown> | undefined;
	"getSSRProps"?: (AsamInfiniteScrollDirective)["getSSRProps"];
	"deep"?: boolean | undefined;
	"install": (app: App) => void;
};

参数与事件说明

`infinite-scroll-delay`

必填：否；声明来源：ASAM 声明。

`infinite-scroll-distance`

必填：否；声明来源：ASAM 声明。

`infinite-scroll-disabled`

必填：否；声明来源：ASAM 声明。

infinite-scroll-disabled 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`infinite-scroll-immediate`

必填：否；声明来源：ASAM 声明。

infinite-scroll-immediate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

AsamInfiniteScrollAttributes 公开类型视图

import type { AsamInfiniteScrollAttributes, AsamInfiniteScrollDirective } from '@asam-ui/ui';

// AsamInfiniteScrollAttributes
type PublicContract = {
	"infinite-scroll-delay"?: number | undefined;
	"infinite-scroll-distance"?: number | undefined;
	"infinite-scroll-disabled"?: boolean | undefined;
	"infinite-scroll-immediate"?: boolean | undefined;
};

无限滚动指令 AsamInfiniteScroll

使用场景 ​

契约与组合 ​

基础用法与状态 ​

基础用法与状态

立即填充与嵌套滚动容器 ​

立即填充与嵌套滚动容器

实例、类型与边界 ​

API

指令 AsamInfiniteScroll

类型 AsamInfiniteScrollCallback

类型 AsamInfiniteScrollDirective

类型 AsamInfiniteScrollAttributes

用法与契约补充说明 ​

契约与组合 ​

契约与组合 ​

契约与组合 ​

关联组件

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

参数与事件说明

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

getSSRProps

deep

install

参数与事件说明

infinite-scroll-delay

infinite-scroll-distance

infinite-scroll-disabled

infinite-scroll-immediate

使用场景

契约与组合

基础用法与状态

立即填充与嵌套滚动容器

实例、类型与边界

指令 `AsamInfiniteScroll`

类型 `AsamInfiniteScrollCallback`

类型 `AsamInfiniteScrollDirective`

类型 `AsamInfiniteScrollAttributes`

用法与契约补充说明

契约与组合

契约与组合

契约与组合

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`

`created`

`beforeMount`

`mounted`

`beforeUpdate`

`updated`

`beforeUnmount`

`unmounted`

`getSSRProps`

`deep`

`install`

`infinite-scroll-delay`

`infinite-scroll-distance`

`infinite-scroll-disabled`

`infinite-scroll-immediate`