IntersectionObserver.disconnect

与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。

解释：停止监听，回调函数将不再触发。

方法参数

无

示例

在开发者工具中预览效果

扫码体验

IntersectionObserver.disconnect - 图1请使用百度APP扫码

图片示例

IntersectionObserver.disconnect - 图2

IntersectionObserver.disconnect - 图3

IntersectionObserver.disconnect - 图4

代码示例

  1. <view class="wrap">
  2.     <scroll-view class="scroll-view" scroll-y>
  3.         <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
  4.             <text class="notice">向下滚动让小球出现</text>
  5.             <!-- 占位元素 -->
  6.             <view class="filling"></view> 
  7.             <!-- 小球 -->
  8.             <view class="ball"></view>
  9.         </view>
  10.     </scroll-view>
  11.     <view class="result-item border-bottom">
  12.         <view class="result-keyword">top</view>
  13.         <view class="result-value">{{data.top}}</view>
  14.     </view>
  15.     <view class="result-item border-bottom">
  16.         <view class="result-keyword">right</view>
  17.         <view class="result-value">{{data.right}}</view>
  18.     </view>
  19.     <view class="result-item border-bottom">
  20.         <view class="result-keyword">bottom</view>
  21.         <view class="result-value">{{data.bottom}}</view>
  22.     </view>
  23.     <view class="result-item">
  24.         <view class="result-keyword">left</view>
  25.         <view class="result-value">{{data.left}}</view>
  26.     </view>
  27.     <view class="result-item">
  28.         <view class="result-keyword">width</view>
  29.         <view class="result-value">{{data.width}}</view>
  30.     </view>
  31.     <view class="result-item">
  32.         <view class="result-keyword">height</view>
  33.         <view class="result-value">{{data.height}}</view>
  34.     </view>
  35.     <button type="primary" bindtap="disconnect">停止监听</button>
  36. </view>
  1. Page({
  2.     data: {
  3.         data: ''
  4.     },
  5.     onReady() {
  6.         const intersectionObserver = swan.createIntersectionObserver(this,{
  7.             selectAll: true
  8.         });
  9.         intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  10.             this.setData('data', res.intersectionRect);
  11.             console.log(res.intersectionRect.left); // 相交区域的左边界坐标
  12.             console.log(res.intersectionRect.top); // 相交区域的上边界坐标
  13.             console.log(res.intersectionRect.width); // 相交区域的宽度
  14.             console.log(res.intersectionRect.height); // 相交区域的高度
  15.         });
  16.         this.intersectionObserver = intersectionObserver;
  17.     },
  18.     disconnect() {
  19.         this.intersectionObserver && this.intersectionObserver.disconnect();
  20.     }
  21. });