intersectionobserver.observe(string targetselector, function callback)
支小宝客户端 支持
安诊儿客户端 支持
主体： 企业支付宝小程序 、 个人支付宝小程序
指定目标节点并开始监听相交状态变化情况。
string targetselector
选择器
function callback
监听相交状态变化的回调函数
参数
object res
| 属性 | 类型 | 兼容性 | 描述 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| id | string | - | 节点 id |
||||||||||||||||||
| dataset | object | 基础库: 2.7.0 |
节点自定义数据属性。当 my.createintersectionobserver 中的 dataset 入参设置为 true 时才会返回 |
||||||||||||||||||
| intersectionratio | number | - | 相交比例。范围 0 ~ 1，大于 0 表示目标节点与参照区域有了交集，等于 1 表示两者已经完全相交，不相交不会触发回调 |
||||||||||||||||||
| intersectionrect | object | - | 相交区域的边界 |
||||||||||||||||||
|
|||||||||||||||||||||
| boundingclientrect | object | - | 目标边界 |
||||||||||||||||||
|
|||||||||||||||||||||
| relativerect | object | - | 参照区域的边界 |
||||||||||||||||||
|
|||||||||||||||||||||
| time | number | - | 相交检测时的时间戳 |
intersectionobserver.observe(string targetselector, function callback)
callback 参数
.axml
.js
<view class="target" style="width: 200px;height: 200px;background-color:blue">view>
my.createintersectionobserver()
.relativetoviewport()
.observe('.target', res => {
console.log(res);
});
{
"boundingclientrect": {
"bottom": 200,
"height": 200,
"left": 0,
"right": 200,
"top": 0,
"width": 200
},
"dataset": {},
"id": "1",
"intersectionratio": 1,
"intersectionrect": {
"bottom": 200,
"height": 200,
"left": 0,
"right": 200,
"top": 0,
"width": 200
},
"relativerect": {
"bottom": 874,
"height": 974,
"left": 0,
"right": 393,
"top": -100,
"width": 393
},
"time": 1672053139587
}