《元素视口可见性检测 》Vue自定义指令 封装

结合 Vue 自定义指令和 Intersection Observer API 实现元素视口可见性检测

1. 实现元素可见性检测

知识铺垫

Intersection Observer API 简介

  • 什么是 Intersection Observer API?
    • 它的主要用途:检测元素是否进入视口或与某个父元素相交。
  • 区别于以往的判断元素距离顶部距离和滚动距离,使用Intersection Observer性能更好

Vue 自定义指令基础

  • Vue 自定义指令的基本语法。
  • 生命周期钩子:mountedupdatedunmounted 等。
  • 如何通过 binding 传递参数和值。
  • 代码解析:
    • mounted 钩子中创建 IntersectionObserver 实例。
    • 使用 threshold 控制触发条件。
    • 通过 binding.value 传递回调函数。
    • unmounted 钩子中清理观察器。

2. 开袋即食·代码:

以下封装好的代码可以直接复制,粘贴到项目的任意js文件中

比如我放在 src/utils/diy_directive_visible.js

javascript 复制代码
export default {
  mounted(el, binding) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          binding.value(entry.isIntersecting);
        });
      },
      {
        threshold: 0.5, // 50%可见时触发
        rootMargin: "0px",
      },
    );
    observer.observe(el);
    el._observer = observer;
  },
  unmounted(el) {
    el._observer?.disconnect();
  },
};

在你的main.js中,进行导入和全局注册

javascript 复制代码
import visible from "./utils/diy_directive_visible.js"  // 导入自己配置的指令
....省略部分内容
const app = createApp(App)
app.directive("visible", visible) //  注册自己配置的指令
....省略部分内容
app.mount("#app")

组件中的使用示例

html 复制代码
<template>
  <div v-visible="handleVisibility">滚动到这里看看!</div>
</template>

<script>
export default {
  methods: {
    handleVisibility(isVisible) {
      if (isVisible) {
        console.log('元素可见!');
      } else {
        console.log('元素不可见!');
      }
    },
  },
};
</script>

3. 补充说明

可用使用的场景

  • 懒加载图片或组件。
  • 无限滚动列表。
  • 动画触发条件。
  • 数据埋点(如曝光统计)。

优化与扩展

  • 动态调整 thresholdrootMargin
  • 处理多个元素的可见性检测。
  • 结合 Vue 的响应式系统实现更复杂的功能。

注意事项

  • 兼容性问题:IntersectionObserver 的浏览器支持情况。
  • 性能优化:避免过度使用观察器。
  • 清理资源:确保在组件销毁时断开观察器。
相关推荐
敲代码的彭于晏1 分钟前
前端上传与下载基础:Blob、File与ArrayBuffer详解
前端
緑水長流6 分钟前
什么是Promise?什么是async和await?
前端·javascript·vue.js
Mintopia7 分钟前
Three.js 相机(Camera)的使用详解
前端·javascript·three.js
wordbaby10 分钟前
PC 屏幕自适应的流行方案解析
前端
Mintopia10 分钟前
Node.js 中path模块的深度解析与实战应用
前端·javascript·node.js
程序员小续11 分钟前
git rebase 和git merge使用及区别
前端·git·后端
静待一世花开11 分钟前
React基础学习
前端
华科云商xiao徐13 分钟前
使用Scrapy编写图像下载程序示例
前端
WillaWang13 分钟前
html结构中图片下方的间隙
前端
阿笑带你学前端14 分钟前
从0到1:我用Flutter造了个全平台IPTV神器,从此看直播不再"精神分裂"!
前端·flutter