我想在用户向下滚动时加载更多的艺术作品。就像一个无限滚动器。我使用**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>
1条答案
按热度按时间2nc8po8w1#
我尝试了
useInfiniteScroll
与Vue 3的组合,它看起来像预期的那样工作。Stackblitz demo here(由于cors问题,仅在chrome浏览器中工作)
请注意,容器是可滚动的,高度为700px,初始3个图像垂直溢出,以便您可以向下滚动。
当容器底部和最后一个图像底部之间的距离小于给定的
10
时,组合器成功地运行loadData
回调以获得更多将被追加的URL,等等。