feat: add scroll-cache demo

Author: LostElkByte

src/pages/index.vue

@@ -10,6 +10,7 @@ const menuItems = computed(() => ([
   { title: t('menus.unocssExample'), route: 'unocss' },
   { title: t('menus.persistPiniaState'), route: 'counter' },
   { title: t('menus.keepAlive'), route: 'keepalive' },
+  { title: t('menus.scrollCache'), route: 'scroll-cache' },
   { title: t('menus.404Demo'), route: 'unknown' },
 ]))
 

src/pages/scroll-cache/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ScrollCache',
+})
+
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const { t } = useI18n()
+
+function onLoad() {
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++) {
+      list.value.push(`${list.value.length + 1}`)
+    }
+
+    loading.value = false
+
+    if (list.value.length >= 40) {
+      finished.value = true
+    }
+  }, 1000)
+}
+
+const scrollTop = ref(0)
+
+onActivated(() => {
+  window.scrollTo(0, scrollTop.value)
+})
+
+onBeforeRouteLeave(() => {
+  scrollTop.value
+    = window.scrollY
+      || document.documentElement.scrollTop
+      || document.body.scrollTop
+})
+</script>
+
+<template>
+  <van-list
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="已经到底啦 ~"
+    loading-text="加载中..."
+    @load="onLoad"
+  >
+    <van-cell
+      v-for="(item, index) in list"
+      :key="index"
+      :border="false"
+      class="mb-8 rounded-12"
+    >
+      <template #title>
+        {{ t('scrollCache.listItem') }}
+      </template>
+
+      <template #value>
+        {{ item }}
+      </template>
+    </van-cell>
+  </van-list>
+</template>
+
+<route lang="json5">
+{
+  name: 'ScrollCache',
+  meta: {
+    title: '📜 ScrollCache',
+    i18n: 'menus.scrollCache',
+    keepAlive: true
+  },
+}
+</route>

src/types/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']

src/types/typed-router.d.ts

@@ -28,6 +28,7 @@ declare module 'vue-router/auto-routes' {
     'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,
     'profile': RouteRecordInfo<'profile', '/profile', Record<never, never>, Record<never, never>>,
     'register': RouteRecordInfo<'register', '/register', Record<never, never>, Record<never, never>>,
+    'ScrollCache': RouteRecordInfo<'ScrollCache', '/scroll-cache', Record<never, never>, Record<never, never>>,
     'settings': RouteRecordInfo<'settings', '/settings', Record<never, never>, Record<never, never>>,
     'unocss': RouteRecordInfo<'unocss', '/unocss', Record<never, never>, Record<never, never>>,
   }