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

Will-LK

于 2022-09-07 11:40:12 发布

阅读量901

点赞数 1

分类专栏： vue3 文章标签： vue

本文链接：https://blog.youkuaiyun.com/K_wdcsdn/article/details/126742451

版权

VueJS Intersection Observer vueuse 可视区域元素检测

关键词由优快云通过智能技术生成

vue3 专栏收录该内容

1 篇文章

订阅专栏

<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>