整理

src/pages/UI-components/infinite-loading/detail.page.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute();
+definePage({
+  meta: {
+    hidden: true,
+  },
+});
+</script>
+
+<template>
+  <h1>Detail</h1>
+  <p>id: {{ route.query.id }}</p>
+</template>

src/pages/UI-components/infinite-loading/index.page.vue

@@ -0,0 +1,130 @@
+<script lang="ts">
+const structuredClone = window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj)));
+
+const K_INITIAL_STATE = deepFreeze({
+  complete: false,
+  error: null as unknown,
+  list: [] as Record<string, never>[],
+  loading: false,
+  page: 0,
+});
+
+let page3ShouldError = true;
+const state = shallowReactive(structuredClone(K_INITIAL_STATE));
+</script>
+
+<script setup lang="ts">
+defineOptions({
+  beforeRouteEnter: (to, from) => {
+    if (from.name !== 'UIComponentsInfiniteLoadingDetail') {
+      Object.assign(state, structuredClone(K_INITIAL_STATE));
+    }
+  },
+  beforeRouteLeave: (to, from) => {
+    if (to.name !== 'UIComponentsInfiniteLoadingDetail') {
+      Object.assign(state, structuredClone(K_INITIAL_STATE));
+    }
+  },
+});
+const refresh = () => {
+  state.list.splice(0, state.list.length);
+  state.page = 0;
+  state.complete = false;
+  loadMore();
+};
+
+type CurrentUse = 'use-intersection-observer-infinite-loading' | 'van-list';
+
+async function loadMore() {
+  if (state.loading) return;
+
+  try {
+    state.loading = true;
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/comments?_page=${++state.page}&_limit=1&timestamp=${Date.now()}`,
+    ).then((res) => {
+      if (state.page === 3 && page3ShouldError) {
+        page3ShouldError = false;
+        throw new Error('test error');
+      } else {
+        return res;
+      }
+    });
+    const data = await response.json();
+    state.list = state.list.concat(data);
+    if ($__DEV__) await new Promise((resolve) => setTimeout(resolve, 500));
+    state.complete = state.list.length >= 5;
+  } catch (error) {
+    state.error = error;
+    state.page--;
+  } finally {
+    state.loading = false;
+  }
+}
+const currentUse = ref<CurrentUse>((sessionStorage.getItem('currentUse') as CurrentUse) || 'van-list');
+watchEffect(() => {
+  sessionStorage.setItem('currentUse', currentUse.value);
+});
+</script>
+
+<template>
+  <div mb-4 class="flex justify-end gap-4 flex-wrap items-start">
+    <Button label="刷新" @click="refresh" />
+    <Button
+      label="push"
+      @click="state.list.push({ id: state.list.length + 1, name: 'name', body: 'body', email: 'email' } as any)"
+    />
+    <Button
+      :label="currentUse"
+      @click="currentUse = currentUse === 'van-list' ? 'use-intersection-observer-infinite-loading' : 'van-list'"
+      class="mb-4"
+    />
+  </div>
+  <template v-if="currentUse === 'van-list'">
+    <VanList
+      @load="loadMore"
+      :loading="state.loading"
+      :error="!!state.error"
+      :error-text="`${state.error}`"
+      :onUpdate:error="() => (state.error = null)"
+      :finished="state.complete"
+    >
+      <template v-for="item in state.list" :key="item.id">
+        <div
+          class="border p-4 mb-[16px]"
+          @click="$router.push({ name: 'UIComponentsInfiniteLoadingDetail', query: { id: item.id } })"
+        >
+          <div>id:{{ item.id }}</div>
+        </div>
+      </template>
+    </VanList>
+  </template>
+
+  <template v-if="currentUse === 'use-intersection-observer-infinite-loading'">
+    <Card
+      v-for="item in state.list"
+      :key="item.id"
+      class="mb-[16px]"
+      @click="$router.push({ name: 'UIComponentsInfiniteLoadingDetail', query: { id: item.id } })"
+    >
+      <template #title>{{ item.name }}</template>
+      <template #content>
+        <p class="mt-[8px]">{{ item.body }}</p>
+      </template>
+      <template #subtitle>id:{{ item.id }} </template>
+      <template #footer>{{ item.email }}</template>
+    </Card>
+    <UseIntersectionObserverInfiniteLoading
+      @load="loadMore"
+      :loading="state.loading"
+      :error="!!state.error"
+      :error-text="`${state.error}`"
+      @clickError="state.error = null"
+      :complete="state.complete"
+    />
+    <div border="1 px solid red rounded-lg" class="p-4 mb-[16px]">
+      {{ { 'list.length': state.list.length } }}
+    </div>
+  </template>
+  <ScrollTop />
+</template>