IntersectionObserver.observe
解释:指定目标节点并开始监听相交状态变化情况
方法参数
String targetSelector, Function callback
targetSelector参数说明 :选择器
callback参数说明 监听相交状态变化的回调函数
回调结果说明
属性 | 类型 | 说明 |
---|---|---|
intersectionRatio | number | 相交比例 |
intersectionRect | Object | 相交区域的边界 |
boundingClientRect | Object | 目标边界 |
relativeRect | Object | 参照区域的边界 |
time | number | 相交检测时的时间戳 |
intersectionRect、boundingClientRect、relativeRect 结构说明
属性 | 类型 | 说明 |
---|---|---|
left | number | 左边界 |
right | number | 右边界 |
top | number | 上边界 |
bottom | number | 下边界 |
示例
扫码体验
请使用百度APP扫码
图片示例
代码示例
<view class="wrap">
<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 class="result-keyword">top: {{data.top}}</view>
<view class="result-keyword">right: {{data.right}}</view>
<view class="result-keyword">bottom: {{data.bottom}}</view>
<view class="result-keyword">left: {{data.left}}</view>
<view class="result-keyword">width: {{data.width}}</view>
<view class="result-keyword">height: {{data.height}}</view>
</view>
Page({
data: {
data: ''
},
onReady() {
swan.createIntersectionObserver(this, {
selectAll: true
})
.relativeTo('.scroll-view')
.observe('.ball', res => {
this.setData('data', res.intersectionRect);
console.log(res.intersectionRect.left); // 相交区域的左边界坐标
console.log(res.intersectionRect.top); // 相交区域的上边界坐标
console.log(res.intersectionRect.width); // 相交区域的宽度
console.log(res.intersectionRect.height); // 相交区域的高度
});
}
});