vue vueUse利用useInfiniteScroll API 实现虚拟滚动

要在 Vue 3 中使用 vueUse 库的 useInfiniteScroll API 实现虚拟滚动，你可以按照以下步骤进行：

1. 安装 @vueuse/core：
   首先，确保你的项目中安装了 @vueuse/core 包。如果还没有安装，可以通过 npm 或 yarn 来安装它：

   npm install @vueuse/core
   # 或者
   yarn add @vueuse/core
   

2. 设置 useInfiniteScroll：
   在你的 Vue 组件中，你可以使用 useInfiniteScroll 来设置无限滚动。以下是一个基本的示例代码：

   <template>
     <div ref="scrollContainer" class="scroll-container">
       <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import { useInfiniteScroll } from '@vueuse/core';
   
   const scrollContainer = ref(null);
   const items = ref([]);
   
   const loadMore = async () => {
     // 模拟加载更多数据
     const newItems = await fetchData();
     items.value.push(...newItems);
   };
   
   // 使用 useInfiniteScroll 钩子
   useInfiniteScroll(
     scrollContainer,
     () => {
       loadMore();
     },
     {
       distance: 10, // 距离底部 10px 时触发加载更多
     }
   );
   </script>
   
   <style>
   .scroll-container {
     height: 300px; /* 限制容器高度 */
     overflow-y: auto; /* 允许垂直滚动 */
   }
   </style>
   

   在这个例子中，scrollContainer 是一个具有固定高度和可滚动内容的 div 元素。当用户滚动到距离底部 10px 的时候，loadMore 函数会被调用，从而加载更多数据。

3. 自定义指令：
   vueUse 还提供了一个自定义指令 vInfiniteScroll，你可以在模板中直接使用它。例如：

   <template>
     <div v-infinite-scroll="loadMore" class="scroll-container">
       <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import { vInfiniteScroll } from '@vueuse/components';
   
   const items = ref([]);
   
   const loadMore = async () => {
     // 模拟加载更多数据
     const newItems = await fetchData();
     items.value.push(...newItems);
   };
   </script>
   

4. 配置选项：
   useInfiniteScroll 接受一个选项对象，你可以自定义滚动的方向、距离、时间间隔等。例如：

   useInfiniteScroll(
     scrollContainer,
     () => {
       loadMore();
     },
     {
       distance: 10, // 距离底部 10px 时触发加载更多
       direction: 'bottom', // 监听滚动方向
       interval: 100, // 两次加载之间的时间间隔
       canLoadMore: (el) => true // 判断是否可以加载更多
     }
   );
   

5. 重置无限滚动：
   如果你需要重置无限滚动，可以使用 reset 函数。这在清空列表或重新加载数据时非常有用：

   function resetScroll() {
     items.value = [];
     // 重置无限滚动状态
     reset();
   }
   

以上步骤提供了一个基本的指南，如何在 Vue 3 应用程序中使用 vueUse 的 useInfiniteScroll API 来实现无限滚动。你可以根据项目的具体需求进行调整和优化。