vue-observe-visibility

使用

v-observe-visibility指令很容易使用。只需传入一个函数:

<div v-observe-visibility="visibilityChanged">
1

同样它也适用于组件

<MyComponent v-observe-visibility="visibilityChanged" />
1

只要元素的可视性发生变化，且参数为布尔值(true表示该元素在页面上可见，false表示不可见)，就会调用该函数。

IntersectionObserverEntry

第二个参数是对应的[IntersectionObserverEntry][IntersectionObserverEntry]对象。

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible
  console.log(entry)
}
1
2
3
4

IntersectionObserver 配置项

使用intersection属性可以传入IntersectionObserver 配置项

<div v-observe-visibility="{
  callback: visibilityChanged,
  intersection: {
    root: ...,
    rootMargin: ...,
    threshold: 0.3,
  },
}">
1
2
3
4
5
6
7
8

Once

只掉元素显示在页面侦听一次有时候有特殊作用，比方说制作介绍动画。设置once为true:

<div v-observe-visibility="{
  callback: visibilityChanged,
  once: true,
}">
1
2
3
4

节流

您可以使用throttle配置项(以毫秒为单位)指定事件将在其触发之后的最小状态持续时间。当您在滚动时跟踪了元素的可见性，但却不希望频繁地获取事件时，它很有用。

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,
}">
1
2
3
4

您还可以在可见性第一次发生变化时通过leading配置项来触发回调，而无需等待节流延迟。它的值可以是visibile、hidden或both。

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,
  throttleOptions: {
    leading: 'visible',
  },
}">
1
2
3
4
5
6
7

传入自定义参数

您可以使用中间函数添加自定义参数：

<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, customArgument)">
1

这里的visibilityChanged调用时将会带着第三个参数customArgument。

禁用

向指令中传入假值(falsy)既可以禁用观察功能：

<div
  v-for="(item, index) of items"
  :key="item.id"
  v-observe-visibility="index === items.length - 1 ? visibilityChanged : false"
>
1
2
3
4
5

← 示例 →