5分钟掌握微信小程序 IntersectionObserver

简介

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见，用通俗的语言来说就是用于监测目标对象与某个参照物的相交情况。

API

IntersectionObserver 微信官方文档

创建

（1）wx.createIntersectionObserver(Object component, Object options)

（2）在组件内部使用 this.createIntersectionObserver([options])

Object component 一般为 this，也可为 null

options 为对象，可填写的属性有三个：

• thresholds ：数值数组，代表相交比例的阈值（可有多个，取值范围 [0,1] ），当相交到达该阈值时会触发一次监听回调，默认为[0]；
• initialRatio ：初始相交比例，如果方法调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数，默认为 0；
• observeAll ：是否同时观测多个目标节点，默认为 fasle；

设置参考区域

（1） IntersectionObserver.relativeToViewport() 指定页面显示区域作为参照区域之一

（2） IntersectionObserver.relativeTo(string selector, Object margins) 使用选择器指定一个节点，作为参照区域之一。

selector 类似于 CSS 的选择器，但仅支持下列语法。

• ID 选择器：#the-id
• class 选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

margins 用来扩展（或收缩）参照节点布局区域的边界

• left 节点布局区域的左边界
• right 节点布局区域的右边界
• top 节点布局区域的上边界
• bottom 节点布局区域的下边界

监听

IntersectionObserver.observe(string targetSelector, function callback)

selector 代表目标模块的选择器，当它和参考区域相交达到阈值比例时，会触发 callback 回调函数，回调函数返回如下几个参数：

• intersectionRatio ： 两者相交比例；
• time ：相交检测时的时间戳；
• intersectionRect ：相交区域的边界；
• boundingClientRect ：目标边界；
• relativeRect ：参照区域的边界；

取消监听

IntersectionObserver.disconnect() 停止监听。回调函数将不再触发

简单示例

微信官方 API 示例 打开小程序开发者工具后点击连接即可引入

代码

<view class="container">
  <view class="page-body">
    <view class