import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
/**
* 数据懒加载
* fn() 要执行的方法
* return 观察的dom元素
*/
export default (fn) => {
// 1. stop 是一个函数。如果调用它,就会停止观察(是否进入或移出可视区域的行为)
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值,表示是否进入可视区域。 true表示 进入 false表示 移出
const target = ref(null)
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
// 这里进行业务逻辑
// 在此处可根据isIntersecting来判断,然后做业务
if (isIntersecting) { // 目标可见,
// 1. ajax可以发了,后续不需要观察了
stop()
// 2. 执行函数
fn()
}
},
{ threshold: 0 } // threshold 元素进入可视区域的比值 [0-1]
)
return target
}
这个方法其实是封装的IntersectionObserver()
方法
IntersectionObserver()
理解
var observer = new IntersectionObserver(callback[, options]);
callback
当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数:
entries
一个IntersectionObserverEntry对象的数组,每个被触发的阈值,都或多或少与指定阈值有偏差。
observer
被调用的IntersectionObserver实例。
options 可选
一个可以用来配置observer实例的对象。如果options未指定,observer实例默认使用文档视口作为root,并且没有margin,阈值为0%(意味着即使一像素的改变都会触发回调函数)。你可以指定以下配置:
root
监听元素的祖先元素Element对象,其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
rootMargin
一个在计算交叉值时添加至根的边界盒(bounding_box (en-US))中的一组偏移量,类型为字符串(string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的margin 属性等同; 可以参考 The root element and root margin in Intersection Observer API来深入了解margin的工作原理及其语法。默认值是"0px 0px 0px 0px"。
threshold
规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0,则意味着监听元素即使与根有1像素交叉,此元素也会被视为可见. 若指定值为1.0,则意味着整个元素都是可见的(此段英文原文直译,正确性有待验证) 。可以参考Thresholds in Intersection Observer API 来深入了解阈值是如何使用的。阈值的默认值为0.0。