2023Vue 中如何实现滚动加载图片或列表？

随着 Web 应用越来越复杂，我们经常需要在页面上展示大量的图片或列表。如果一次性加载所有的内容，会极大地影响页面的加载速度和用户体验。在这种情况下，滚动加载就成了一种非常流行的方式。

滚动加载，也叫无限滚动，指的是在用户滚动页面的过程中，通过 AJAX 技术，实时请求后续数据。这种技术在 Facebook、Twitter、Instagram 等社交媒体网站中广泛应用，以实现高效体验。

在 Vue.js 中，实现滚动加载的方式通常有两种，一种是自己写代码实现，另一种是使用第三方插件。接下来，我们就一一进行介绍。

一、自己写代码实现滚动加载

Vue.js 提供了一个非常方便的指令 v-scroll，可以用来监听页面的滚动事件。我们可以在滚动时，判断 div 元素的 scrollTop 距离是否达到了底部，如果达到了底部就触发后续数据请求。

下面是一个使用 v-scroll 实现滚动加载图片的示例代码：

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

在这个例子中，我们使用 v-scroll 监听了 div 元素的滚动事件，并在 onScroll 方法中判断是否触底，如果触底则触发 loadImages 方法，该方法会模拟异步请求数据并把数据 push 到 images 数组中。此外，为了提升用户体验，我们添加了一个 loading 变量，用来实时提示数据正在加载中。

二、使用第三方插件实现滚动加载

除了自己写代码实现滚动加载外，我们还可以使用一些第三方插件来实现滚动加载。这里我们介绍一下比较常用的两个插件，分别是 vue-infinite-scroll 和 vue-virtual-scroll-list。

1. vue-infinite-scroll 插件

vue-infinite-scroll 是一款基于 Vue.js 实现的无限滚动插件，它能够帮助我们实现滚动加载列表、图片等场景。使用这个插件非常简单，只需要在需要实现滚动加载的组件中，添加 v-infinite-scroll 指令，然后指定需要触发滚动加载的方法即可。

下面是一个使用 vue-infinite-scroll 插件实现滚动加载列表的示例代码：

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

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

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

在这个例子中，我们先通过 npm 安装了 vue-infinite-scroll 插件，并将其引入到组件中。然后，我们使用 mixins 将自动创建一个可被触发的 infinite-scroll 事件的 Vue 实例混入到当前组件中。最后，我们在 v-infinite-scroll 指令中指定 loadMore 方法，该方法会模拟异步请求数据并将数据 push 到 items 数组中。

2. vue-virtual-scroll-list 插件

vue-virtual-scroll-list 是一款基于 Vue.js 实现的虚拟滚动插件，能够帮助我们快速实现大数据量的列表滚动，提高页面性能和用户体验。与传统的滚动加载不同的是，vue-virtual-scroll-list 采用了虚拟滚动技术，只渲染当前可见区域内的数据项，从而避免了大量的 DOM 渲染和重排，提高了页面的效率和流畅度。

下面是一个使用 vue-virtual-scroll-list 插件实现滚动加载列表的示例代码：

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

在这个例子中，我们先通过 npm 安装了 vue-virtual-scroll-list 插件，并将其引入到组件中。然后，我们在模板中使用 <virtual-list> 组件，该组件接受 size、remain、data-key、data-sources 和 data-component 等参数。

其中，size 参数指定了每个数据项的高度，remain 参数指定了预渲染的数量，data-key 指定了用于唯一标识每个数据项的字段，data-sources 指定了需要渲染的数据列表，data-component 指定了数据项的渲染组件。最后，我们在 load 事件中，执行异步请求数据的逻辑。

结语

通过以上介绍，我们可以发现，Vue.js 中实现滚动加载图片或列表有多种方式。自己写代码实现虽然灵活，但是代码较多，需要花费一定的时间和精力；而使用第三方插件虽然简单，但需要深入了解插件的原理和使用方法，才能更好地进行业务开发。因此，在实现滚动加载时，需要根据具体业务场景和自己的实力来选择适合自己的方式。