my.createintersectionobserver(object options)
基础库 或更高版本； 且 支付宝客户端 10.1.32 或更高版本； 若版本较低，建议采取 兼容处理 。
支小宝客户端 支持
安诊儿客户端 支持
小程序开发者工具： 支持。
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 页面运行机制 、 intersectionobserver 概览
创建 intersectionobserver 对象实例。
此接口需要在 page.onready 之后调用。
object options
查看示例
| 属性 | 类型 | 默认值 | 必填 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| thresholds | array |
[0] | 否 | - | 阈值的数组，用于指定相交区域占目标节点面积的比例阈值，即表示在什么情况下认为目标节点与参考节点相交。 |
| initialratio | number | 0 | 否 | - | 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数 |
| selectall | boolean | false | 否 | - | 是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetselector 将选中多个节点（注意：同时选中过多节点将影响渲染性能） |
| dataset | boolean | false | 否 | 基础库: 2.7.0 |
目标节点的 dataset 信息。当 dataset 为 true 时，intersectionobserver.observe 回调中的 res 对象，会携带目标节点的 dataset 属性 |
object
返回值为 intersectionobserver 对象实例。
page({
onready() {
my.createintersectionobserver({
// 设置 0.25,0.5两个阈值，这些阈值都是相交区域占目标节点面积的比例。当相交区域占目标节点面积的比例大于等于这些阈值中的任何一项时，就会触发相交事件。
thresholds: [0.25, 0.5],
})
.relativetoviewport({ top: 100, bottom: 100 })
.observe(".logo", (res) => {
console.log(res, "intersectionobserver");
console.log(res.intersectionratio); // 相交区域占目标节点的布局区域的比例
console.log(res.intersectionrect); // 相交区域
console.log(res.relativerect); // 参照区域的边界
console.log(res.boundingclientrect); // 目标边界
console.log(res.time); // 时间戳
console.log(res.id);
});
},
});
-
tip
my.createintersectionobserver()检测渲染层上的所有节点。要限定检测范围，推荐使用this.createintersectionobserver()。详情可查看 页面运行机制。