JXML
优质
小牛编辑
125浏览
2023-12-01
IntersectionObserver jd.createIntersectionObserver(Object component, Object options)
创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createIntersectionObserver([options])
来代替。
参数
Object component
自定义组件实例
Object options
选项
属性 | 类型 | 默认值 | 必填 | 说明 | |
---|---|---|---|---|---|
thresholds | Array.<number> | [0] | 否 | 一个数值数组,包含所有阈值。 | |
initialRatio | number | 0 | 否 | 初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。 | |
observeAll | boolean | false | 否 | 是否同时观测多个目标节点(而非一个),如果设为 true ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能) |
返回值
IntersectionObserver
IntersectionObserver
IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
方法
IntersectionObserver.disconnect()
停止监听。回调函数将不再触发
IntersectionObserver.observe(string targetSelector, function callback)
指定目标节点并开始监听相交状态变化情况
参数
string targetSelector 选择器
function callback 监听相交状态变化的回调函数
参数 Object res
属性 | 类型 | 说明 |
---|---|---|
intersectionRatio | number | 相交比例 |
intersectionRect | Object | 相交区域的边界 |
boundingClientRect | Object | 目标边界 |
relativeRect | Object | 参照区域的边界 |
time | number | 相交检测时的时间戳 |
res.intersectionRect 的结构
属性 | 类型 | 说明 |
---|---|---|
left | number | 左边界 |
right | number | 右边界 |
top | number | 上边界 |
bottom | number | 下边界 |
width | number | 宽度 |
height | number | 高度 |
res.boundingClientRect 的结构
属性 | 类型 | 说明 |
---|---|---|
left | number | 左边界 |
right | number | 右边界 |
top | number | 上边界 |
bottom | number | 下边界 |
width | number | 宽度 |
height | number | 高度 |
res.relativeRect 的结构
属性 | 类型 | 说明 |
---|---|---|
left | number | 左边界 |
right | number | 右边界 |
top | number | 上边界 |
bottom | number | 下边界 |
IntersectionObserver IntersectionObserver.relativeTo(string selector, Object margins)
使用选择器指定一个节点,作为参照区域之一。
参数
string selector 选择器
Object margins 用来扩展(或收缩)参照节点布局区域的边界
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
left | number | 否 | 节点布局区域的左边界 | |
right | number | 否 | 节点布局区域的右边界 | |
top | number | 否 | 节点布局区域的上边界 | |
bottom | number | 否 | 节点布局区域的下边界 |
返回值
IntersectionObserver
IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)
指定页面显示区域作为参照区域之一
参数
Object margins 用来扩展(或收缩)参照节点布局区域的边界
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
left | number | 否 | 节点布局区域的左边界 | |
right | number | 否 | 节点布局区域的右边界 | |
top | number | 否 | 节点布局区域的上边界 | |
bottom | number | 否 | 节点布局区域的下边界 |
返回值
IntersectionObserver
示例代码
下面的示例代码中,如果有多个目标节点(用选择器 .target-class 指定),每个节点进入显示区域以下 10px 时,就会触发回调函数。
Page({
onLoad: function(){
jd.createIntersectionObserver(this,{observeAll: true}).relativeToViewport({bottom: 10}).observe('.target-class', (res) => {
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
})
}
})