背景

在最近的项目中，开发了一个小程序列表页面，PM大大提高了对嵌入点的要求。当列表中的每个项目出现在屏幕上时，它需要报告一条记录。

目标

如果按图操作，应该依次上报第1-7项，但上滑时不会重复上报。

我要怎么做？

收到需求的第一感觉是，我是不是要监控页面滚动然后通过offsetTop计算！这显然不是最有效的。于是我翻看了一下微信的开发文档，发现有一个IntersectionObserver API，正好符合我的需求。

首先，我们需要创建一个交叉点观察者WX。创建交叉点观察器(对象组件，对象选项)

交叉服务器有四种方法

交叉观察器。Relativeto使用选择器指定一个节点作为参考区域之一。十字路口观察者。相对查看端口(对象边距)将页面显示区域指定为参考区域之一。十字路口观察者。ObserveCallback回调)指定目标节点，并开始监视交叉点状态的变化。十字路口观察者。Disconnect()停止监控。回调函数将不再触发这里的引用对象是屏幕，所以我们使用交集观察者。相对视口，使我们的参考对象和比较规则

页面({ data : { list : [{ value : 1，hadReport: false }，{ value: 2，hadReport: false }，{ value: 3，hadReport: false }，{ value: 4，hadreport 3: false }，{ value: 5，hadreport 3: false }，{ value: 6，hadreport 333:_ observer=this . createintersectionobserver({ observer all : true })这。_ observer . relativetoviewport({ bottom : 0 })。观察('。item '，(RES)={ const { index }=RES . dataset；if(！this.data.list[index]。had RePOrt){ console . log(` RePOrt $ { index } `)this . data . list[index]。hadReport=true这最后的效果。setdata ({list: [])。concat(这个。data.list)})}}，onunload () {if (this。_ observer)这个。_观察者。disconnect ()}})如下

结论

对于像这样的埋点，以后可以用监控dom的方式来做，而不是只想着监控和滚动来计算位置。这种监控方式除了能够上报埋点外，非常适合做偷懒加载图片等一系列操作。联合

以上操作都是基于微信小程序，那么浏览器是否有相应的API呢？

浏览器有对应的API，交集观察器API，具体用法和上面的用法类似。

var options={ root margin : ' 0px '，threshold : 1.0 } var observer=new intersection observer((.args)={ console . log(args)；}，选项)；observer . observe(document . queryselector(')。item’)；请注意，这将监控dom元素的可见性变化，这意味着当dom出现在窗口中时，它将触发回调，当它消失在窗口中时，它也将触发回调

但是，浏览器的IntersectionObserver属性的兼容性是通用的。如果想在浏览器中做曝光或者偷懒加载，可以考虑使用原来的方法，监控浏览器滚动，计算dom的offsetTop。可以参考一下作者很久以前写的图片延迟加载的原理和应用

参考文件

浅谈交叉服务器的延迟加载

微信小程序部门间服务器文档

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。