InfiniteScroll 无限滚动 vue实例

在 Vue 中实现无限滚动可以使用 `InfiniteScroll` 插件。这个插件可以自动监听滚动事件，当滚动到底部时，会自动触发加载更多数据的方法。

首先，你需要在你的 Vue 项目中安装 `vue-infinite-scroll` 插件。可以使用以下命令进行安装：

npm install vue-infinite-scroll --save

安装完成之后，在你的 Vue 组件中引入 `InfiniteScroll` 插件，并使用 `v-infinite-scroll` 指令实现无限滚动。

例如，在一个商品列表的组件中：

<template>
  <div class="product-list">
    <div v-for="(product, index) in productList" :key="index">{{product.name}}</div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll'

export default {
  name: 'ProductList',
  data() {
    return {
      productList: [], // 商品列表
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页数量
      loading: false, // 是否正在加载
    }
  },
  mounted() {
    // 初始化加载第一页数据
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.loading = true
      // 模拟异步请求数据
      setTimeout(() => {
        // 获取数据
        const data = this.getProducts(this.pageNum, this.pageSize)
        // 添加到商品列表中
        this.productList = [...this.productList, ...data]
        // 加载完成
        this.loading = false
        // 更新页码
        this.pageNum++
      }, 1000)
    },
    // 获取商品数据
    getProducts(pageNum, pageSize) {
      // 模拟请求数据
      const productList = []
      for (let i = 0; i < pageSize; i++) {
        const id = (pageNum - 1) * pageSize + i
        productList.push({
          id,
          name: `商品${id}`,
        })
      }
      return productList
    },
  },
  directives: {
    InfiniteScroll,
  },
}
</script>

上面的代码中，我们使用 `v-for` 指令渲染商品列表，并且使用 `v-if` 指令判断是否正在加载数据。

在 `mounted` 钩子函数中，我们首先加载第一页数据。

在 `loadData` 方法中，我们先将 `loading` 标记为 `true`，表示正在加载数据。然后使用 `setTimeout` 模拟异步请求数据，并在加载完成后将数据添加到 `productList` 中。最后将 `loading` 标记为 `false`，表示加载完成。同时，更新 `pageNum` 的值，以便下一次加载更多数据。

在组件中使用 `v-infinite-scroll` 指令，指定 `loadData` 方法。当滚动到底部时，`loadData` 方法会自动触发。

<template>
  <div class="product-list" v-infinite-scroll="loadData">
    <div v-for="(product, index) in productList" :key="index">{{product.name}}</div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

这样，当用户滚动到页面底部时，就会自动加载更多数据。