javascript VueUse useInfiniteScroll不加载更多项目

8yoxcaq7 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(132)

我想在用户向下滚动时加载更多的艺术作品。就像一个无限滚动器。我使用**VueUse来实现这一点，并想在我的vuex计算存储上使用.slice()，以便在我接近Dom元素底部时每次增加3个作品。
第一个3 works load一切正常，但是如果我向下滚动nothing more loads**。sliceNumber没有递增，也没有出现错误。像useInfiniteScroll()函数这样的seam不会触发任何事件。🤔
有人看到这个问题了吗？😅感谢您提前提供的帮助👍

这里是我的Vue组件

<template>
<div class="Section Explore">

    <ExploreBanner />

    <div
        ref="workDom"
        class="WorkList flex_c_h flex_wrap gap2">
        <Suspense>

            <WorkThumbnail
                v-for="(work, index) in works"
                :key="work"
                :work="work"
                :index="index" />

            <template #fallback>
                <div>
                    Loading...
                </div>
            </template>

        </Suspense>

    </div>

</div>
</template>

<script>
import {
    ref
} from 'vue'
import WorkThumbnail from '@/components/Explore/WorkThumbnail.vue'
import ExploreBanner from '@/components/Explore/ExploreBanner.vue'
import {
    useInfiniteScroll
} from '@vueuse/core'

export default {
    name: 'Explore',
    setup() {

        const workDom = ref(null)
        const sliceNumber = ref(3)
        console.log(sliceNumber.value)

        useInfiniteScroll(
            workDom,
            () => {
                sliceNumber.value += 3
                console.log(sliceNumber.value)
            }, {
                distance: 10
            }
        )

        return {
            workDom,
            sliceNumber
        }
    },
    components: {
        WorkThumbnail,
        ExploreBanner,

    },
    computed: {
        works() {
            return this.$store.state.works.slice(0, this.sliceNumber)
        }
    },
    mounted() {
        document.documentElement.style.setProperty('--color_p', '#a25aff');
        document.documentElement.style.setProperty('--color_bg', '57, 35, 66');
    },

}
</script>

JavaScript

来源：https://stackoverflow.com/questions/74377437/vueuse-useinfinitescroll-not-loading-more-items

1条答案

按热度按时间

2nc8po8w1#

我尝试了useInfiniteScroll与Vue 3的组合，它看起来像预期的那样工作。
Stackblitz demo here（由于cors问题，仅在chrome浏览器中工作）

<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>

请注意，容器是可滚动的，高度为700px，初始3个图像垂直溢出，以便您可以向下滚动。
当容器底部和最后一个图像底部之间的距离小于给定的10时，组合器成功地运行loadData回调以获得更多将被追加的URL，等等。

赞(0）回复(0）举报 2023-04-10

我来回答

javascript VueUse useInfiniteScroll不加载更多项目

1条答案

相关问题

热门标签

最新问答