vue-infinite-scroll vue3 的引入方法

在 Vue 3 中使用 vue-infinite-scroll，需要先安装该插件。可以通过 npm 或 yarn 进行安装。

使用 npm：

npm install vue-infinite-scroll@next

使用 yarn：

yarn add vue-infinite-scroll@next

安装完成后，在需要使用无限滚动的组件中引入该插件：

import { ref } from 'vue';
import { useInfiniteScroll } from 'vue-infinite-scroll';

export default {
  setup() {
    const list = ref([]);
    const currentPage = ref(1);

    const loadMore = async () => {
      // 加载更多数据
      const data = await fetchData(currentPage.value);
      currentPage.value++;
      list.value = [...list.value, ...data];
    };

    useInfiniteScroll(loadMore);

    return {
      list,
    };
  },
};

在上面的示例中，我们使用 `useInfiniteScroll` 函数将 `loadMore` 函数注册为无限滚动事件的回调函数。当用户滚动到列表底部时，`loadMore` 函数会被调用，加载更多的数据。