From cd1cd720022d937940c115ecd2c3a1eeea391efa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?=
 <37316281+yanhao98@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:23:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=97=A0=E9=99=90?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=8A=A0=E8=BD=BD=E5=92=8C=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...UseIntersectionObserverInfiniteLoading.vue | 11 ++++++----
 src/pages/index-page.vue                      |  1 +
 src/pages/infinite-loading.page.vue           | 21 +++++++++++--------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/UseIntersectionObserverInfiniteLoading.vue b/src/components/UseIntersectionObserverInfiniteLoading.vue
index c3a109d..a81732e 100644
--- a/src/components/UseIntersectionObserverInfiniteLoading.vue
+++ b/src/components/UseIntersectionObserverInfiniteLoading.vue
@@ -18,7 +18,7 @@ function checkIsVisible(el: Element, root: Element | null = null) {
 
 <script setup lang="ts">
 const props = defineProps<{
-  asyncLoad: () => Promise<{ hasMore: boolean }>;
+  asyncLoad: (page: number) => Promise<{ hasMore: boolean }>;
 }>();
 defineSlots<{
   loading(): unknown;
@@ -27,7 +27,8 @@ defineSlots<{
 }>();
 
 const target = ref(null);
-const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>(''); // TODO: use ts-enum-util
+let currentPage = 0;
+const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>('');
 
 const load = async (why?: string) => {
   console.group('load');
@@ -37,7 +38,7 @@ const load = async (why?: string) => {
 
   state.value = 'loading';
   try {
-    const { hasMore } = await props.asyncLoad();
+    const { hasMore } = await props.asyncLoad(++currentPage);
     state.value = hasMore ? 'loaded' : 'complete';
     if (hasMore) {
       await nextTick();
@@ -47,9 +48,10 @@ const load = async (why?: string) => {
     }
 
     if (!hasMore) {
-      pause(); // TODO: 下拉刷新后，怎么恢复？ maybe @register
+      pause(); // TODO: 下拉刷新后，怎么恢复？
     }
   } catch (error) {
+    currentPage--;
     state.value = 'error';
   }
 };
@@ -73,6 +75,7 @@ const { pause /* , resume, isSupported, isActive */ } = useIntersectionObserver(
 
 <template>
   <div class="infinite-loading" ref="target">
+    <!-- TODO: unSupport -->
     <div v-if="state === 'complete'" class="infinite-loading__complete">
       <slot name="complete">
         <span>没有更多了</span>
diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index 100906c..7fc0aa5 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -37,6 +37,7 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
     <li><router-link class="green" :to="{ name: 'SomePage' }">Some Page</router-link></li>
     <li><router-link class="green" :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
     <li><router-link class="green" :to="{ name: 'Api' }">Api</router-link></li>
+    <li><router-link class="green" :to="{ name: 'InfiniteLoading' }">Infinite Loading</router-link></li>
   </ul>
 
   <div b="1px solid pink" mt-8>
diff --git a/src/pages/infinite-loading.page.vue b/src/pages/infinite-loading.page.vue
index bfb6fd1..c667d78 100644
--- a/src/pages/infinite-loading.page.vue
+++ b/src/pages/infinite-loading.page.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
 let showDebugError = true;
-const DEBUG_MAX_PAGE = 5;
 
-let page = 0;
 const list = ref<Record<string, never>[]>([]);
-const loadData = async () => {
+const loadData = async (page: number) => {
   await new Promise((resolve) => setTimeout(resolve, 250 /* + 1000 */));
-  if (page === 1 && showDebugError) {
+  if (page === 2 && showDebugError) {
     showDebugError = false;
     throw new Error('Failed to load comments');
   }
-  // FIXME: 如果接口出错了要把 page 恢复
-  const response = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${++page}&_limit=1`);
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=1&timestamp=${Date.now()}`,
+  );
   const data = await response.json();
   list.value.push(...data);
-  return { hasMore: page < DEBUG_MAX_PAGE };
+  return { hasMore: list.value.length < 5 };
 };
 </script>
 
@@ -26,9 +25,13 @@ const loadData = async () => {
       <p class="mt-[8px]">{{ item.body }}</p>
     </template>
   </Card>
+  <div border="1 px solid red">
+    {{ { 'list.length': list.length } }}
+  </div>
   <UseIntersectionObserverInfiniteLoading :async-load="loadData">
-    <template #error="{ retry }">
+    <!-- <template #error="{ retry }">
       <Button fluid @click="retry">Retry</Button>
-    </template>
+    </template> -->
   </UseIntersectionObserverInfiniteLoading>
+  <ScrollTop />
 </template>