IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
方法 | 说明 |
|---|---|
| disconnect | 停止监听。回调函数将不再触发 |
| observe | 指定目标节点并开始监听相交状态变化情况 |
| relativeTo | 使用选择器指定一个节点，作为参照区域之一 |
| relativeToViewport | 指定页面显示区域作为参照区域之一 |
Page({
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver(this);
this.intersectionObserver
.relativeTo('.scroll-view')
.relativeToViewport({bottom: 100})
.observe('.ball', res => {
console.log('observe', res)
});
},
onUnload() {
this.intersectionObserver && this.intersectionObserver.disconnect();
}
});
与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。
Page({
data: {
intersectionRect: ''
},
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver(this);
this.intersectionObserver
.relativeTo('.scroll-view')
.observe('.ball', res => {
this.setData('intersectionRect', res.intersectionRect);
// 相交区域的左边界坐标
console.log(res.intersectionRect.left);
// 相交区域的右边界坐标
console.log(res.intersectionRect.right);
// 相交区域的上边界坐标
console.log(res.intersectionRect.top);
// 相交区域的下边界坐标
console.log(res.intersectionRect.bottom);
// 相交区域的宽度
console.log(res.intersectionRect.width);
// 相交区域的高度
console.log(res.intersectionRect.height);
});
},
disconnect() {
this.intersectionObserver && this.intersectionObserver.disconnect();
}
});
指定目标节点并开始监听相交状态变化情况。
属性 | 类型 | 说明 |
|---|---|---|
| intersectionRatio | Number | 相交比例 |
| intersectionRect | Object | 相交区域的边界 |
| boundingClientRect | Object | 目标边界 |
| relativeRect | Object | 参照区域的边界 |
| time | Number | 相交检测时的时间戳 |
属性 | 类型 | 说明 |
|---|---|---|
| left | Number 左边界 | |
| right | Number | 右边界 |
| top | Number | 上边界 |
| bottom | Number | 下边界 |
| width | Number | 相交区域的宽度 |
| height | Number | 相交区域的高度 |
属性 | 类型 | 说明 |
|---|---|---|
| left | Number | 左边界 |
| right | Number | 右边界 |
| top | Number | 上边界 |
| bottom | Number | 下边界 |
| width | Number | 目标宽度 |
| height | Number | 目标高度 |
属性 | 类型 | 说明 |
|---|---|---|
| left | Number | 左边界 |
| right | Number | 右边界 |
| top | Number | 上边界 |
| bottom | Number | 下边界 |
Page({
data: {
intersectionRect: ''
},
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver(this);
this.intersectionObserver
.relativeTo('.scroll-view')
.observe('.ball', res => {
this.setData('intersectionRect', res.intersectionRect);
// 相交区域的左边界坐标
console.log(res.intersectionRect.left);
// 相交区域的右边界坐标
console.log(res.intersectionRect.right);
// 相交区域的上边界坐标
console.log(res.intersectionRect.top);
// 相交区域的下边界坐标
console.log(res.intersectionRect.bottom);
// 相交区域的宽度
console.log(res.intersectionRect.width);
// 相交区域的高度
console.log(res.intersectionRect.height);
});
},
disconnect() {
this.intersectionObserver && this.intersectionObserver.disconnect();
}
});
使用选择器指定一个节点，作为参照区域之一
用来扩展（或收缩）参照节点布局区域的边界。
属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| left | Number | 否 | 节点布局区域的左边界 | |
| right | Number | 否 | 节点布局区域的右边界 | |
| top | Number | 否 | 节点布局区域的上边界 | |
| bottom | Number | 否 | 节点布局区域的下边界 |
Page({
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver(this);
this.intersectionObserver
.relativeTo('.scroll-view', 50);
// {selector: ".scroll-view", margins: 50}
console.log('实例：', this.intersectionObserver);
xhs.showModal({
title: 'relativeTo',
content: JSON.stringify(this.intersectionObserver._relativeInfo)
});
},
onUnload() {
this.intersectionObserver && this.intersectionObserver.disconnect();
}
});
指定页面显示区域作为参照区域之一
用来扩展（或收缩）参照节点布局区域的边界。
属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| left | Number | 否 | 节点布局区域的左边界 |
| right | Number | 否 | 节点布局区域的右边界 |
| top | Number | 否 | 节点布局区域的上边界 |
| bottom | Number | 否 | 节点布局区域的下边界 |
Page({
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver(this);
this.intersectionObserver
.relativeTo('.scroll-view', 50);
// {selector: ".scroll-view", margins: 50}
console.log('实例：', this.intersectionObserver);
xhs.showModal({
title: 'relativeToViewport',
content: JSON.stringify(this.intersectionObserver._relativeInfo)
});
},
onUnload() {
this.intersectionObserver && this.intersectionObserver.disconnect();
}
});