h5新API=＞IntersectionObserver

最新推荐文章于 2024-11-27 14:10:43 发布

原创最新推荐文章于 2024-11-27 14:10:43 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍H5中IntersectionObserver API的使用方法，通过自动观察元素是否可见，实现加载更多等效果。文章包含API的基本参数说明及示例代码。

介绍

H5新的 IntersectionObserver 可以自动"观察"元素是否可见。所以这个 API 叫做"交叉观察器"，之所以叫交叉观察，因为当被观察元素出现在可视区域时，会和可视区域有一个交叉的过程，当观察元素开始和可视区域交叉的时候也就意味着观察元素开始进入可视区域。

IntersectionObserver有两个参数

第一个时回调函数会触发两次第一次出来时，第二次触发离开时

1；observe.observe(DOM节点) 具体要观察哪个Dom节点就调用这个实例的observe方法

2：observe.unobserve(DOM节点)取消观察

3：io.disconnect()关闭观察

第二个参数是对象是配置对象

1.root：指定根 (root) 元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。

2.rootMargin：根 (root) 元素的外边距。类似于 CSS 中的 margin 属性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为 0。

3.threshold：可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候，你可以指定该属性值为 0.5。如果你想要 target 元素在 root 元素的可见程度每多 25% 就执行一次回调，那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是 0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为 1.0 含义是当 target 完全出现在 root 元素中时候回调才会被执行。

代码示例

<template>
	<view class="content">
		sad <br>
		sad <br>
		sad <br>
		sad <br>
		sad <br>
        。。。。。N+++
		<div class="wqh">
			
		</div>
	</view>
</template>

<script>
	export default {

		mounted() {
			let wqh = document.querySelector('.wqh') //获取元素被观察元素
			var ob = new IntersectionObserver(function(entires){
				var entry = entires[0]
				if(entry.isIntersecting){
					console.log('到底了');
				}
			},{
				threshold:0.5 //设置可视元素的高度
			})
			
			ob.observe(wqh)
		}
	}
</script>

<style lang="scss">
.wqh{
	width: 100px;
	height: 100px;
	background-color: aqua;
}
</style>

详细文档请阅：Intersection Observer API - Web API 接口参考 | MDN