当前位置：首页 > VUE

vue实现懒加载数据

2026-02-24 02:21:24VUE

vue实现懒加载数据的方法

使用Intersection Observer API

Intersection Observer API可以检测元素是否进入视口，适合实现懒加载。在Vue中可以通过自定义指令或组件实现。

// 自定义指令
Vue.directive('lazy', {
  inserted: (el, binding) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value()
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

<!-- 使用示例 -->
<div v-lazy="loadData">加载更多...</div>

使用vue-lazyload插件

vue-lazyload是专门为Vue设计的懒加载插件，支持图片和组件懒加载。

安装插件：

npm install vue-lazyload

配置使用：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 3
})

<img v-lazy="imageUrl">

滚动事件监听

通过监听滚动事件判断是否到达容器底部，适合列表数据的懒加载。

methods: {
  handleScroll() {
    const scrollHeight = document.documentElement.scrollHeight
    const scrollTop = document.documentElement.scrollTop
    const clientHeight = document.documentElement.clientHeight

    if (scrollTop + clientHeight >= scrollHeight - 100) {
      this.loadMore()
    }
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

使用第三方库vue-infinite-loading

vue-infinite-loading提供了更完善的无限滚动解决方案。

安装：

npm install vue-infinite-loading

使用：

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{item}}</div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  components: { InfiniteLoading },
  methods: {
    infiniteHandler($state) {
      axios.get('/api/items').then(({ data }) => {
        this.items.push(...data)
        $state.loaded()
      })
    }
  }
}
</script>