微信小程序 IntersectionObserver 用法介绍

简介

IntersectionObserver 是一个观察器，用来监测目标与参照物的相交情况，也就是说这两个区域有重叠。

1. IntersectionObserver.relativeTo(string selector, Object margins)

   使用选择器指定一个节点，作为参照区域之一。

   Page({
     onLoad() {
       this._observer = wx.createIntersectionObserver(this)
       this._observer
         .relativeTo('.scroll-view')
         .observe('.ball', (res) => { // 指定目标节点并开始监听相交状态变化情况
           console.log(res);
           this.setData({
             appear: res.intersectionRatio > 0
           })
         })
     }
   })

2. IntersectionObserver.relativeToViewport(Object margins)

   指定页面显示区域作为参照区域之一。通过 appear 的属性判断 header 是否显示。

   Page({
     onLoad() {
       // 判断顶部标题栏是否显示
       // 如果目标节点（用选择器 .header 指定）进入显示区域以下 110px 时，就会触发回调函数。
       wx.createIntersectionObserver().relativeToViewport({bottom: 110}).observe('.header', res => {
         console.log(res)
         this.setData({
           appear: res.intersectionRatio > 0
         })
       })
     }
   })

相交是回调函数结果 res 分析

1. boundingClientRect: 目标边界。这个目标，就是我们的观察对象 header，我们可以看到它刚开始与显示区域相交时的位置情况。bottom = 1px top = -109px，这个位置是相对于整个页面的，不是相对于参照元素的。
2. dataset: 观察对象携带的数据。
3. id: 观察对象的id，它与上面的 dataset 多使用于一次观察多个对象的场景，用于区分不同的对象。
4. intersectionRatio 相交比例: 大于0的话表示两者有了交集，等于1的话表示两者已经完全相交。
5. intersectionRect 相交区域: 可以看出此时只有1px的高度有交集。
6. relativeRect: 参照区域的边界。通过其上下左右四个属性值可以看出它就是组件在页面中的位置。
7. time: 监测到两者相交时的时间戳，不太有用。

脱离相交回调函数结果 res 分析

1. boundingClientRect: 目标边界。这个目标，就是我们的观察对象 header，我们可以看到它刚开始与显示区域相交时的位置情况。bottom = 0px top = -110px，这个位置是相对于整个页面的，不是相对于参照元素的。
2. dataset: 观察对象携带的数据。
3. id: 观察对象的id，它与上面的 dataset 多使用于一次观察多个对象的场景，用于区分不同的对象。
4. intersectionRatio 相交比例: 相交比例为0，说明两者不相交。
5. intersectionRect 相交区域: height = 0，说明此时没有相交了。
6. relativeRect: 参照区域的边界。作为参考物，它的值一般是不会变的。可以对比它从开始相交时就一直没变，通过其上下左右四个属性值可以看出它就是组件在页面中的位置。
7. time: 监测到两者相交时的时间戳，不太有用。