[Vuejs]-VueUse useInfiniteScroll not loading more items

by

1👍

✅

I tried useInfiniteScroll composable with Vue 3 and it seems working as expected.

Stackblitz demo here (working only in chrome browser due to cors issue)

<script setup>
import { computed, ref } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'
import ShowImage from '@/components/ShowImage.vue'
import { loadMore } from './urls'

const el = ref(null)

const count = computed(() => thumbnails.value.length)
const thumbnails = ref([])

loadData()

useInfiniteScroll(el, loadData, { distance: 10 })

async function loadData() {
  const moreData = await loadMore(3, count.value)

  thumbnails.value = thumbnails.value.concat(moreData)
}
</script>

<template>
  <div ref="el" class="my-container">
    <ShowImage v-for="url in thumbnails" :url="url"></ShowImage>
  </div>
  count: {{ count }}
</template>

<style scoped>
.my-container {
  border: 1px solid gray;
  overflow-y: scroll;
  margin-top: 10px;
  padding: 10px;
  height: 700px;
}
</style>

Note that container is made scrollable with height 700px and initial 3 images overflow vertically so that you can scroll down.

When distance between container bottom and last image’s bottom became smaller than given 10, the composable successfully runs loadData callback to get more urls that will be appended, etc.

👤bob

Leave a comment