feat: 添加无限加载组件和示例页面

src/pages/useIntersectionObserverList.page.vue

@@ -2,39 +2,87 @@
 import { useIntersectionObserver } from '@vueuse/core';
 import { ref } from 'vue';
 
+function checkIsVisible(el: Element, root: Element | null = null) {
+  if (!el) return false;
+
+  const elRect = el.getBoundingClientRect();
+  const rootRect = root
+    ? root.getBoundingClientRect()
+    : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
+
+  return (
+    elRect.bottom >= rootRect.top &&
+    elRect.top <= rootRect.bottom &&
+    elRect.right >= rootRect.left &&
+    elRect.left <= rootRect.right
+  );
+}
+
+interface Comment {
+  postId: number;
+  id: number;
+  name: string;
+  email: string;
+  body: string;
+}
+const list = ref<Comment[]>([]);
+
 const loading = ref(false);
-const list = ref<string[]>([]);
+const page = ref(0);
+const pageSize = 1;
+
 const loadMore = async () => {
+  if (loading.value) return;
+
   loading.value = true;
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
-  list.value.push(...items);
-  loading.value = false;
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/comments?_page=${++page.value}&_limit=${pageSize}`,
+    );
+    const data = await response.json();
+    list.value.push(...data);
+  } catch (error) {
+    console.error('Failed to load comments:', error);
+  } finally {
+    loading.value = false;
+  }
+  await nextTick();
+  if (checkIsVisible(target.value!)) {
+    loadMore();
+  }
 };
 
 const target = ref(null);
 const isVisible = ref(false);
 
-const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
-  isVisible.value = entry?.isIntersecting || false;
-});
+const { isActive, pause, resume, isSupported } = useIntersectionObserver(
+  target,
+  ([entry]) => {
+    isVisible.value = entry?.isIntersecting || false;
+    if (entry?.isIntersecting) {
+      loadMore();
+    }
+  },
+  // { threshold: 0.1 },
+);
 </script>
 
 <template>
-  <Card v-for="item in list" :key="item" class="mb-[16px]">
-    <template #title>{{ item }}</template>
+  <Card v-for="item in list" :key="item.id" class="mb-[16px]">
+    <template #title>{{ item.name }}</template>
+    <template #content>
+      <p class="text-gray-600">{{ item.email }}</p>
+      <p class="mt-[8px]">{{ item.body }}</p>
+    </template>
   </Card>
 
-  <div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
+  <div ref="target" class="border-[8px] border-blue-500 p-[16px]">
     <Button label="Load more" :loading="loading" fluid @click="loadMore" />
   </div>
 
   <ScrollTop />
-  <div
-    class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
-    flex="~ col"
-    items-end
-  >
+  <div class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white" flex="~ col" items-end>
     <label class="checkbox">
       <span mr="[8px]">isSupported: {{ isSupported }}</span>
       <input
@@ -47,7 +95,7 @@ const { isActive, pause, resume, isSupported } = useIntersectionObserver([target
     </label>
     <div>
       Element
-      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
+      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400'">
         {{ isVisible ? 'inside' : 'outside' }}
       </span>
       the viewport