Vue3网站开发中，如何做到网页进入可视区域，再渲染相关的数据

最新推荐文章于 2025-01-10 15:21:36 发布

原创最新推荐文章于 2025-01-10 15:21:36 发布 · 961 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在VueJS应用中利用@vueuse/core库的useIntersectionObserver函数，监控元素是否进入可视区域。通过将目标元素绑定到ref并设置观察回调，当元素进入可视区域时，停止观察并打印相关信息。示例代码展示了如何在Vue组件中设置和使用Intersection Observer。

<script setup lang="ts">
//下载vueuse插件
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';

//此target要和被监视的目标模块想关联
const target = ref(null);

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log('是否进入可视区域', isIntersecting);
  if (isIntersecting) {
    stop();
  }
});
</script>

<template>
  <div>
    <div class="box"></div>
    <div class="box2" ref="target"></div>
  </div>
</template>

<style lang="less" scoped>
.box {
  width: 500px;
  height: 1000px;
  background-image: linear-gradient(to right, red, green, yellow);
}
.box2 {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: pink;
}
</style>