Infinity Scroll

Load more data while reach bottom of the page

Basic usage

Add v-infinite-scroll to the list to automatically execute loading method when scrolling to the bottom.

1

2

3

4

5

6

7

8

9

10

---

<template>
  <div
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    class="h-[320px] overflow-y-auto"
  >
    <div
      v-for="i in count"
      :key="i"
      class="bg-primary-1 c-primary-3 mt-2 rounded-sm h-10 flex justify-center items-center"
    >
      {{ i }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
const count = ref(0)
const disabled = computed(() => count.value >= 300)
const load = () => {
  count.value += 10
}
</script>

Disable Loading

1

2

3

4

5

6

7

8

9

10

---

<template>
  <div class="h-[320px] overflow-y-auto">
    <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
      <div
        v-for="i in count"
        :key="i"
        class="bg-red-1 c-red-3 mt-2 rounded-sm h-10 flex justify-center items-center"
      >
        {{ i }}
      </div>
    </div>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">No more</p>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 40)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 10
    loading.value = false
  }, 1000)
}
</script>

Directives

Name	Description	Type	Accepted values	Default
v-infinite-scroll	Load more data while reach bottom of the page	function	-	-
infinite-scroll-disabled	is disabled	boolean	-	false
infinite-scroll-delay	throttle delay (ms)	number	-	200
infinite-scroll-distance	trigger distance (px)	number	-	0
infinite-scroll-immediate	Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state.	boolean	-	true