Vue 3 监听元素滚动底部时加载数据并且通过节流来避免过多的事件被触发

码柱

已于 2023-03-13 09:44:40 修改

阅读量2.2k

点赞数 1

文章标签： javascript vue.js Powered by 金山文档

于 2023-03-11 00:07:24 首次发布

本文链接：https://blog.csdn.net/weixin_53747308/article/details/129456573

版权

文章介绍了如何利用IntersectionObserverAPI进行懒加载优化，特别是在Vue应用中。当元素进入视口达到指定阈值时，通过IntersectionObserverEntry.isIntersecting属性判断并触发数据加载，实现了按需加载数据，提高性能。

摘要由CSDN通过智能技术生成

1.直接上代码，这里用了一个IntersectionObserver API，详细使用方法可以看官方文档

2.IntersectionObserver() 构造函数创建一个新对象，当它检测到目标元素的可见性已超过一个或多个阈值时，该对象将执行指定的回调函数。

3. IntersectionObserver Entry 是一个包含有关目标元素和其相对于根节点的交叉信息的对象。每次观察元素的可见性变化时IntersectionObserver 实例会将一个或多个 IntersectionObserver Entry 对象传递给其回调函数。我们可以检查这些对象的 isIntersecting 属性来确定元素是否进入或离开了视图范围

3.1IntersectionObserver Entry.isIntersecting 是 IntersectionObserver Entry 对象的一个属性，用于指示观察元素与根节点是否相交

3.2当观察元素部分或全部进入根节点（或视口）threshold: 1时，isIntersecting 属性为 true。当观察元素完全离开根节点时，该属性为 false

在懒加载等场景中，我们通常需要在元素进入视图时加载它所需的数据，因此 IntersectionObserver Entry.isIntersecting 属性非常实用

3.1

<template>
  <div ref="container" style="height: 400px; overflow-y: scroll">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { debounce } from 'lodash'
const isLoading = ref(false) //loading
const page = ref(1)
const items: any = ref([])
const container: any = ref(null) //ref获取dom元素
const observer: any = ref(null)
const fetchData = () => {
  isLoading.value = true
  // TODO: 发送请求获取数据...
  // 模拟异步加载数据
  setTimeout(() => {
    const newItems = Array.from(
      { length: 10 },
      (item, index) => `Item ${items.value.length + index}`
    )
    items.value = [...items.value, ...newItems]
    isLoading.value = false
  }, 1000)
  console.log(items.value)
}

onMounted(() => {
  // 在 options 中将容器元素作为根节点（root）
  const options = {
    root: container.value,
    threshold: 0.5, //将阈值设置为 0.5，表示当观察元素的一半进入视图时就触发回调函数
  }
  observer.value = new IntersectionObserver(
    debounce(([entry]: any) => {
      if (entry.isIntersecting && !isLoading.value) {
        page.value++
        fetchData()
      }
    }, 500),
    options
  )
  // 将观察器对象绑定在列表中的最后一个子元素上，以便能够监听它的可见性变化
  observer.value.observe(container.value.lastElementChild)
})
onBeforeUnmount(() => {
  // 停止监听
  observer.value.disconnect()
})
</script>