Vue Virtual Scroller 结合 VueUse 实现无限滚动

本文档旨在解决在使用 Vue Virtual Scroller 和 VueUse 的 useInfiniteScroll 函数时，遇到的无限滚动无法正常触发的问题。通过详细的代码示例和步骤说明，帮助开发者正确地将两者结合使用，实现高效的无限滚动列表。核心在于确保 ref 在组件挂载后正确绑定，并正确导出响应式引用。

在使用 Vue Virtual Scroller（vue-virtual-scroller）和 VueUse 的 useInfiniteScroll 函数时，可能会遇到无限滚动功能无法正常工作的问题。这通常是由于组件挂载时 ref 的绑定时机不正确导致的。本文将提供一种解决方案，确保 useInfiniteScroll 能够正确地绑定到 Virtual Scroller 的滚动元素上，从而实现无限滚动。

问题分析

在 Vue 组件的 setup 函数中，ref 的值在组件挂载之前是 null。这意味着，如果在组件挂载之前调用 useInfiniteScroll，它将无法正确地绑定到滚动元素上。

立即学习“前端免费学习笔记（深入）”；

解决方案

为了解决这个问题，我们需要将 useInfiniteScroll 的调用延迟到组件挂载之后。可以使用 Vue 的 onMounted 生命周期钩子来实现这一点。

代码示例

以下是一个修改后的代码示例，展示了如何正确地使用 onMounted 来初始化 useInfiniteScroll：

import { ref, onMounted, defineComponent } from 'vue'
import { useInfiniteScroll } from '@vueuse/core'
export default defineComponent({
//...
setup(props) {
// ...
const scroller = ref<HTMLElement | null>(null) // 类型定义允许 null
const items = ref([]) // 示例数据
onMounted(() => {
useInfiniteScroll(
scroller,
() => {
// 模拟异步加载更多数据
return new Promise((resolve) => {
setTimeout(() => {
//getRelatedSolutions({
//  skip: items.value.length,
//  limit: USE_CASE_LIMIT,
//  loadMore: true,
//  isScrollTop: false,
//  sortBy: sortBy.isAscending ? sortBy.key : `-${sortBy.key}`
//})
const newData = Array.from({ length: 10 }, (_, i) => ({ id: items.value.length + i, name: `Item ${items.value.length + i}` }));
items.value = [...items.value, ...newData];
resolve();
}, 500);
});
},
{
distance: 100 // 滚动到底部的距离触发加载更多
}
)
})
return {
//...
scroller, // 如果未使用 `<script setup>`，则必须返回 scroller
items
}
},
template: `
<div ref="scroller">
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
<div v-if="items.length === 0">Loading...</div>
</div>
`
})

代码解释

1. 引入 onMounted: 从 Vue 中引入 onMounted 生命周期钩子。
2. 定义 scroller ref: 定义一个 ref 来引用滚动元素。
3. onMounted 钩子: 在 onMounted 钩子中调用 useInfiniteScroll。这样可以确保在组件挂载之后，scroller ref 已经正确地绑定到滚动元素上。
4. 返回 scroller: 如果没有使用 <script setup>，确保从 setup 函数中返回 scroller ref，以便在模板中使用。
5. 类型定义: 建议为 scroller ref 添加类型定义 ref<HTMLElement | null>(null)，允许初始值为 null，避免潜在的类型错误。

注意事项

• <script setup>: 如果使用 <script setup>，则无需显式返回 scroller，因为所有顶层绑定的变量都会自动暴露给模板。
• 组件导出: 请确保你的组件正确地导出了。如果未使用 <script setup>，则需要使用 export default { /* code here */ } 或 export default defineComponent({ /* code here */ }) 来包装 setup 函数。推荐使用 defineComponent，因为它提供了更好的类型支持。
• 滚动容器样式: 确保滚动容器（在这个例子中是 DynamicScroller.e-solution-list__body 或示例代码中的 div）具有 overflow-y: auto 或 overflow-y: scroll 样式，以便启用滚动。
• 数据加载逻辑: 替换示例代码中的模拟数据加载逻辑为你的实际数据加载函数 getRelatedSolutions。
• 距离阈值: 根据你的需求调整 useInfiniteScroll 的 distance 选项，以控制何时触发加载更多数据的回调函数。

总结

通过将 useInfiniteScroll 的调用延迟到组件挂载之后，可以确保它能够正确地绑定到 Virtual Scroller 的滚动元素上，从而实现无限滚动功能。记住，正确的 ref 绑定和组件导出是关键。同时，确保滚动容器具有正确的样式，并且数据加载逻辑正确实现。