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. });