diff --git a/src/components/virt-list/index.tsx b/src/components/virt-list/index.tsx index 127202c..05f1bf5 100644 --- a/src/components/virt-list/index.tsx +++ b/src/components/virt-list/index.tsx @@ -87,6 +87,9 @@ function useVirtList>( // 全局需要响应式的数据 const reactiveData: ShallowReactive = shallowReactive({ + hasReachedBottom: false, + hasReachedTop: false, + // 可视区域的个数,不算buffer,只和clientSize和minSize有关 views: 0, @@ -408,30 +411,34 @@ function useVirtList>( } function judgePosition() { - // 使用2px作为误差范围 const threshold = Math.max(props.scrollDistance, 2); if (direction === 'forward') { if (reactiveData.offset - threshold <= 0) { - // console.log('[VirtList] 到达顶部'); - emitFunction?.toTop?.(props.list[0]); + if (!reactiveData.hasReachedTop) { + emitFunction?.toTop?.(props.list[0]); + reactiveData.hasReachedTop = true; + } + } else { + reactiveData.hasReachedTop = false; } } else if (direction === 'backward') { - // 使用一个 Math.round 来解决小数点的误差问题 const scrollSize = Math.round(reactiveData.offset + slotSize.clientSize); const distanceToBottom = Math.round(getTotalSize() - scrollSize); + if (distanceToBottom <= threshold) { - // console.log('[VirtList] 到达底部'); - emitFunction?.toBottom?.(props.list[props.list.length - 1]); + if (!reactiveData.hasReachedBottom) { + emitFunction?.toBottom?.(props.list[props.list.length - 1]); + reactiveData.hasReachedBottom = true; + } + } else { + reactiveData.hasReachedBottom = false; } } } function onScroll(evt: Event) { - // console.log('onscroll'); - emitFunction?.scroll?.(evt); - const offset = getOffset(); if (offset === reactiveData.offset) return; @@ -439,10 +446,11 @@ function useVirtList>( reactiveData.offset = offset; calcRange(); - judgePosition(); } + // const onScroll = throttledOnScroll; + function calcViews() { // 不算buffer的个数 const newViews = diff --git a/src/components/virt-list/type.ts b/src/components/virt-list/type.ts index 3568c79..7fae1cf 100644 --- a/src/components/virt-list/type.ts +++ b/src/components/virt-list/type.ts @@ -22,6 +22,9 @@ export type ReactiveData = { bufferTop: number; bufferBottom: number; + + hasReachedBottom: boolean; + hasReachedTop: boolean; }; export interface BaseListProps> {