vue3 监听元素是否在可视范围内 图片懒加载

js 部分

import { ref, nextTick } from "vue";

const showArr = ref({
  product: false,
});

nextTick(() => {
  // 获取所有的 div
  const divs = document.querySelectorAll(".container > div");
  divs.forEach((div) => {
    // 循环添加监听
    observer.observe(div);
  });
});

// IntersectionObserver 监听元素是否出现在可视区域
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // entry.isIntersecting为true时 证明有元素进入可视范围内了
    if (entry.isIntersecting) {
    // entry.target.classList[0] 为class名
    // 监听到那一个class被可视时showArr下的那个参数变为true(对应的是class)
      showArr.value[entry.target.classList[0]] = true;
    }
  });
});

html部分

  <div class="container">
	<div class="product">
      <transition
        name="fade"
        class="animated animate__slideInUp"
        leave-active-class=""
        v-if="showArr.product"
      >
      	内容
      </transition>
     </div>
  </div>

实现的效果就是 监听container下的所有div 当监听观察到product元素被可视时showArr.product 变为true

transition标签是animate.css过渡动画库(淡入、旋转、缩放、平移，等过渡动画)

下面来教学animate.css使用方法(不需要过渡动画的 可以不用往下看了 把transition标签换成div之类的随意标签)

animate.css 官网https://animate.style/ （打开有点慢请耐心等待）

安装

npm install animate.css --save

main.js引入

import 'animate.css';

使用方法
class: 显示特效
leave-active-class: 隐藏特效
具体的特效效果和class类型 到官网去看
要配合 v-if控制显示隐藏使用
display: block 我没试 不知道管不管用

  <div class="container">
	<div class="product">
      <transition
        name="fade"
        class="animated animate__slideInUp"
        leave-active-class=""
        v-if="showArr.product"
      >
      	内容
      </transition>
     </div>
  </div>