feat(useInfiniteScroll): add a reset method

vueuse · Mar 26, 2024 · 13e9147 · 13e9147
1 parent 1558cd2
commit 13e9147
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/packages/core/useInfiniteScroll/demo.vue b/packages/core/useInfiniteScroll/demo.vue
@@ -3,16 +3,21 @@ import { ref } from 'vue'
 import { useInfiniteScroll } from '@vueuse/core'
 
 const el = ref<HTMLElement | null>(null)
-const data = ref([1])
+const data = ref<number[]>([])
 
-useInfiniteScroll(
+const { reset } = useInfiniteScroll(
   el,
   () => {
     const length = data.value.length + 1
     data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
   },
   { distance: 10 },
 )
+
+function resetList() {
+  data.value = []
+  reset()
+}
 </script>
 
 <template>
@@ -21,4 +26,7 @@ useInfiniteScroll(
       {{ item }}
     </div>
   </div>
+  <button @click="resetList()">
+    Reset
+  </button>
 </template>
diff --git a/packages/core/useInfiniteScroll/index.md b/packages/core/useInfiniteScroll/index.md
@@ -16,14 +16,19 @@ import { useInfiniteScroll } from '@vueuse/core'
 const el = ref<HTMLElement | null>(null)
 const data = ref([1, 2, 3, 4, 5, 6])
 
-useInfiniteScroll(
+const { reset } = useInfiniteScroll(
   el,
   () => {
     // load more
     data.value.push(...moreData)
   },
   { distance: 10 }
 )
+
+function resetList() {
+  data.value = []
+  reset()
+}
 </script>
 
 <template>
@@ -32,6 +37,9 @@ useInfiniteScroll(
       {{ item }}
     </div>
   </div>
+  <button @click="resetList()">
+    Reset
+  </button>
 </template>
 ```
 

diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
@@ -109,5 +109,8 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
 
   return {
     isLoading,
+    reset() {
+      nextTick(() => checkAndLoad())
+    },
   }
 }