vue3使用vue-infinite-scroll

Vue-infinite-scroll 是一个 Vue.js 的插件，它可以帮助我们在滚动页面时加载更多的数据，实现无限滚动的效果。下面是在 Vue3 中使用 vue-infinite-scroll 的步骤：

1. 安装 vue-infinite-scroll：

npm install vue-infinite-scroll --save

2. 在 main.js 中引入 vue-infinite-scroll：

import { createApp } from 'vue'
import App from './App.vue'
import infiniteScroll from 'vue-infinite-scroll'

const app = createApp(App)
app.use(infiniteScroll)
app.mount('#app')

3. 在需要使用无限滚动的组件中添加 v-infinite-scroll 指令：

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      busy: false
    }
  },
  methods: {
    loadMore() {
      if (this.busy) return
      this.busy = true
      fetch('/api/getData?page=' + this.page)
        .then(res => res.json())
        .then(data => {
          this.items = this.items.concat(data)
          this.page++
          this.busy = false
        })
    }
  }
}
</script>

在上面的代码中，我们使用 v-infinite-scroll 指令来监听滚动事件，并调用 loadMore 方法来加载更多的数据。infinite-scroll-disabled 属性用来控制是否禁用无限滚动，infinite-scroll-distance 属性用来设置滚动到距离底部多少像素时触发加载更多数据的事件。

以上就是使用 vue-infinite-scroll 实现无限滚动的基本步骤。