feat: 更新无限加载组件，支持分页加载和错误处理

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>

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>

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(
-  const response = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${++page}&_limit=1`);
+    `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>