vue3 下拉加载插件

Vue3 中下拉加载插件通常用于无限滚动或者分页场景，当用户滚动到页面底部时，会自动触发加载更多数据的操作。一些常用的 Vue3 下拉加载插件有：

1. **vue-infinite-loading**：这是一个轻量级的 Vue 指令，它监听滚动事件并在满足条件时动态加载数据。

2. **v-loading-vue**：这个插件提供了一个简单易用的 API，可以轻松地添加滚动到底部加载更多或分页功能。

3. **vue-scroll-to-bottom**：专注于滚动到底部加载的组件，配合 `@scroll` 和 `v-if` 机制，实现简洁的加载效果。

4. **vue-paginate**：不仅适用于下拉加载，还可以处理一般的分页功能。

要使用这些插件，通常需要在模板中设置监听滚动事件，并配置何时开始加载新内容。安装好相应的依赖后，在组件的 `mounted` 或者 `created` 生命周期钩子里初始化并绑定滚动事件。

<template>
  <div v-infinite-loading :on-loading="loadMore" @infinite="loadNextPage"></div>
</template>

<script>
import { useInfiniteLoading } from 'vue-infinite-loading';

export default {
  setup() {
    const { loaded, loadMore, hasMoreData } = useInfiniteLoading();

    // ...
    
    function loadMore() {
      if (hasMoreData()) {
        // 加载更多数据的逻辑
      }
    }

    return {
      loaded,
      loadMore,
    };
  },
};
</script>