发布时间:2024-03-23 16:01
IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见,用通俗的语言来说就是用于监测目标对象与某个参照物的相交情况。
IntersectionObserver 微信官方文档
(1)wx.createIntersectionObserver(Object component, Object options)
(2)在组件内部使用 this.createIntersectionObserver([options])
Object component 一般为 this,也可为 null
options 为对象,可填写的属性有三个:
(1) IntersectionObserver.relativeToViewport() 指定页面显示区域作为参照区域之一
(2) IntersectionObserver.relativeTo(string selector, Object margins) 使用选择器指定一个节点,作为参照区域之一。
selector 类似于 CSS 的选择器,但仅支持下列语法。
margins 用来扩展(或收缩)参照节点布局区域的边界
IntersectionObserver.observe(string targetSelector, function callback)
selector 代表目标模块的选择器,当它和参考区域相交达到阈值比例时,会触发 callback 回调函数,回调函数返回如下几个参数:
IntersectionObserver.disconnect() 停止监听。回调函数将不再触发
微信官方 API 示例 打开小程序开发者工具后点击连接即可引入
<view class="container">
<view class="page-body">
<view class="page-section message">
<text wx:if="{{appear}}"> 小球出现 text>
<text wx:else> 小球消失 text>
view>
<view class="page-section">
<scroll-view class="scroll-view" scroll-y>
<view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
<text class="notice">向下滚动让小球出现text>
<view class="filling">view>
<view class="ball">view>
view>
scroll-view>
view>
view>
view>
.scroll-view {
height: 400rpx;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.5s;
}
.notice {
margin-top: 150rpx;
}
.ball {
width: 200rpx;
height: 200rpx;
background: #1aad19;
border-radius: 50%;
}
.filling {
height: 400rpx;
}
.message {
width: 100%;
display: flex;
justify-content: center;
}
.message text {
font-size: 40rpx;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
Page({
data: {
appear: false,
},
onLoad() {
this._observer = wx.createIntersectionObserver(this);
this._observer.relativeTo(".scroll-view").observe(".ball", (res) => {
console.log(res);
this.setData({
appear: res.intersectionRatio > 0,
});
});
},
onUnload() {
if (this._observer) this._observer.disconnect();
},
});
根据录屏的控制台打印内容可以看出,无论是出现还是消失,只要当小球跟 scroll-view 的相交比例为 0(即接触)时,触发一次回调。
具体看看控制台打印内容
区别主要在于 intersectionRatio,上面大于 0 说明小球出现,下面等于 0 则说明小球消失,intersectionRect 也是同理。
observerAll 只能观测已经存在的元素,假如是动态加载列表,则无法观测到之后添加的元素。
因此动态加载列表,需要使用 IntersectionObserver 为每一个元素绑定,或者在添加元素后 disconnect 后 connect(第二种方法在 connect 时会存在观测到部分元素满足 初始相交比例与设定值不相等且达到阈值 从而触发回调,因此建议使用第一种方法)