159 lines
3.9 KiB
Vue
159 lines
3.9 KiB
Vue
<!--
|
||
* - https://github.com/vuetifyjs/vuetify/blob/05076ce61f6af069198dc4f676509f0a5e306c73/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx
|
||
* - https://github.com/vuetifyjs/vuetify/blob/05076ce61f6af069198dc4f676509f0a5e306c73/packages/vuetifyjs/vuetify/packages/vuetify/src/composables/intersectionObserver.ts
|
||
-->
|
||
<script lang="ts">
|
||
/* https://github.com/youzan/vant/blob/be93d4990fd671338b5d1066cf8419519d668d65/packages/vant/src/list/List.tsx */
|
||
function checkIsVisible(el: Element, root: Element | null = null) {
|
||
if (!el) return false;
|
||
|
||
const elRect = el.getBoundingClientRect();
|
||
const rootRect = root
|
||
? root.getBoundingClientRect()
|
||
: { bottom: window.innerHeight, left: 0, right: window.innerWidth, top: 0 };
|
||
|
||
return (
|
||
elRect.bottom >= rootRect.top &&
|
||
elRect.top <= rootRect.bottom &&
|
||
elRect.right >= rootRect.left &&
|
||
elRect.left <= rootRect.right
|
||
);
|
||
}
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* @example
|
||
*
|
||
* ```ts
|
||
* const list = ref<Record<string, never>[]>([]);
|
||
* const loadData = async (page: number) => { ... };
|
||
* ```
|
||
*
|
||
* ```vue
|
||
* <UseIntersectionObserverInfiniteLoading />
|
||
* ```
|
||
*/
|
||
|
||
const props = defineProps<{
|
||
complete: boolean;
|
||
error: boolean;
|
||
errorText: string;
|
||
loading: boolean;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
clickError: [];
|
||
load: [];
|
||
}>();
|
||
|
||
defineSlots<{
|
||
// 加载完成（没有更多了）
|
||
complete(): unknown;
|
||
// 加载失败
|
||
error(): unknown;
|
||
// 加载完成（还有更多）
|
||
loaded(): unknown;
|
||
// 加载中
|
||
loading(): unknown;
|
||
}>();
|
||
|
||
const check = (reason?: string) => {
|
||
nextTick(() => {
|
||
if (
|
||
props.loading ||
|
||
props.complete ||
|
||
// props.disabled ||
|
||
props.error
|
||
) {
|
||
return;
|
||
}
|
||
if (checkIsVisible(target.value!)) {
|
||
emit('load');
|
||
}
|
||
});
|
||
};
|
||
|
||
const target = ref(null);
|
||
|
||
const { pause, resume } = useIntersectionObserver(
|
||
target,
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
if (props.loading) return;
|
||
check('isIntersecting');
|
||
}
|
||
},
|
||
{
|
||
immediate: false,
|
||
root: undefined,
|
||
rootMargin: '0px',
|
||
// 数值形式（单个值）：表示目标元素可见部分与整个目标元素的比例。例如：threshold: 0.5
|
||
// 目标元素可见比例达到 50% 时触发回调。
|
||
// 数组形式（多个值）：表示多个可见比例触发点。例如：threshold: [0, 0.25, 0.5, 0.75, 1.0]。
|
||
// 在目标元素可见部分从 0% 增加到 100% 时，每达到一个阈值都会触发回调。
|
||
threshold: 0,
|
||
},
|
||
);
|
||
watchEffect(() => {
|
||
if (props.complete) {
|
||
pause();
|
||
} else {
|
||
resume();
|
||
}
|
||
});
|
||
|
||
watch(
|
||
() => [props.loading, props.complete, props.error],
|
||
() => check('watch'),
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="infinite-loading" ref="target">
|
||
<div v-if="complete" class="infinite-loading__complete">
|
||
<slot name="complete">
|
||
<span>没有更多了</span>
|
||
</slot>
|
||
</div>
|
||
<template v-else>
|
||
<template v-if="error">
|
||
<div class="infinite-loading__error" @click="emit('clickError')">
|
||
<slot name="error">
|
||
<span> {{ props.errorText || '加载失败，点击重试' }} </span>
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-show="loading" class="infinite-loading__loading">
|
||
<slot name="loading">
|
||
<span> 加载中... </span>
|
||
</slot>
|
||
</div>
|
||
<div v-show="!loading" class="infinite-loading__loaded" @click="check('click loaded')">
|
||
<slot name="loaded">
|
||
<span> 加载更多 </span>
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.infinite-loading__loading,
|
||
.infinite-loading__loaded,
|
||
.infinite-loading__complete,
|
||
.infinite-loading__error {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 3rem;
|
||
color: #666;
|
||
}
|
||
.infinite-loading__loaded,
|
||
.infinite-loading__error {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|