简介
IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见,用通俗的语言来说就是用于监测目标对象与某个参照物的相交情况。
API
创建
(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">