swan.createIntersectionObserver

解释： 创建并返回一个 IntersectionObserver 对象实例。在自定义组件中，可以使用 this.createIntersectionObserver([options]) 来代替。

方法参数

Object object

options参数说明

属性名类型必填默认值说明
thresholdsArray否[0]一个数值数组，包含所有阈值。
initialRationumber否0初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。
selectAllboolean否false是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）

示例

扫码体验

swan.createIntersectionObserver - 图1请使用百度APP扫码

代码示例1

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="message">
  3.         <text s-if="appear">小球出现</text>
  4.         <text s-else>小球消失</text>
  5.     </view>
  6.     <view>
  7.         <scroll-view class="scroll-view" scroll-y>
  8.             <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
  9.                 <text class="notice">向下滚动让小球出现</text>
  10.                 <!-- 占位元素 -->
  11.                 <view class="filling"></view> 
  12.                 <!-- 小球 -->
  13.                 <view class="ball"></view>
  14.             </view>
  15.         </scroll-view>
  16.     </view>
  17. </view>
  1. Page({
  2.     data: {
  3.         appear: false
  4.     },
  5.     onReady() {
  6.         const intersectionObserver = swan.createIntersectionObserver();
  7.         // 监测scroll-view可视区域 和 小球元素节点 的相交情况
  8.         intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  9.             console.log('observe', res)
  10.             // boundingClientRect: 目标边界，这里指小球的位置情况，这个位置是相对于整个页面的，不是相对于参照元素的scroll-view的
  11.             // dataset: 观察对象携带的数据。
  12.             // id: 观察对象的id，它与上面的dataset多使用于一次观察多个对象的场景，用于区分不同的对象。
  13.             // intersectionRatio: 相交比例，为0时说明两者不相交。
  14.             // intersectionRect: 相交区域，height 为 0 时说明此时没有相交。
  15.             // relativeRect: 参照区域的边界，作为参考物，它的值一般是不会变的。可以对比它于开始相交时一直没变，因为它就是一个scroll-view的组件在页面上呈现出的位置信息。
  16.             // time: 监测到两者相交时的时间戳
  17.             this.setData('appear', res.intersectionRatio > 0);
  18.         });
  19.         this.intersectionObserver = intersectionObserver;
  20.     },
  21.     onUnload() {
  22.         this.intersectionObserver && this.intersectionObserver.disconnect();
  23.     }
  24. });
  1. .wrap {
  2.     padding-top: 30rpx;
  3. }
  5. .scroll-view {
  6.     height: 400rpx;
  7.     background: #fff;
  8. }
  10. .scroll-area {
  11.     height: 1300rpx;
  12.     display: flex;
  13.     flex-direction: column;
  14.     align-items: center;
  15.     transition: .5s;
  16. }
  18. .notice {
  19.     margin-top: 150rpx;
  20. }
  22. .ball {
  23.     width: 200rpx;
  24.     height: 200rpx;
  25.     background: #38f;
  26.     border-radius: 50%;
  27. }
  29. .filling {
  30.     height: 400rpx;
  31. }
  33. .message {
  34.     margin: 50rpx 0;
  35.     width: 100%;
  36.     display: flex;
  37.     justify-content: center;
  38. }
  40. .message text {
  41.     font-size: 40rpx;
  42.     font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
  43. }

代码示例2 - options为thresholds时 ：

在开发者工具中预览效果

  1. Page({
  2.     data: {
  3.         appear: false
  4.     },
  5.     onReady() {
  6.         const intersectionObserver = swan.createIntersectionObserver({
  7.             // 阈值设置少，避免触发过于频繁导致性能问题
  8.             thresholds: [1]
  9.         });
  10.         // 监测scroll-view可视区域 和 小球元素节点的相交情况
  11.        //  我配置了 thresholds：[1]，那么当监听对象和参照物相交比例达到 1 时，会触发监听器的回调函数
  13.         intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  14.             console.log('observe', res)
  15.             // intersectionRatio: 相交比例，为0时说明两者不相交。
  16.             this.setData('appear', res.intersectionRatio > 0);
  17.         });
  18.         this.intersectionObserver = intersectionObserver;
  19.     },
  20.     onUnload() {
  21.         this.intersectionObserver && this.intersectionObserver.disconnect();
  22.     }
  23. });

代码示例3 - options为initialRatio时 ：

在开发者工具中预览效果

  1. Page({
  2.     data: {
  3.         appear: false
  4.     },
  5.     onReady() {
  6.         const intersectionObserver = swan.createIntersectionObserver({
  7.             // 初始相交比例，默认 0，达到 initialRatio 或 thresholds 中的阈值时，回调被触发
  8.             initialRatio: 1
  9.         });
  10.         // 监测scroll-view可视区域 和 小球元素节点的相交情况
  11.        //  我配置了 thresholds：[1]，那么当监听对象和参照物相交比例达到 1 时，会触发监听器的回调函数
  13.         intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  14.             console.log('observe', res)
  15.             // intersectionRatio: 相交比例，这里为 1 时说明两者不相交。
  16.             this.setData('appear', res.intersectionRatio > 0);
  17.         });
  18.         this.intersectionObserver = intersectionObserver;
  19.     },
  20.     onUnload() {
  21.         this.intersectionObserver && this.intersectionObserver.disconnect();
  22.     }
  23. });

代码示例4 - options为selectAll时 ：

在开发者工具中预览效果

  1. Page({
  2.     data: {
  3.         appear: false
  4.     },
  5.     onReady() {
  6.         const intersectionObserver = swan.createIntersectionObserver({
  7.             selectAll: true
  8.         });
  9.         // 监听两个小球
  10.         intersectionObserver.relativeTo('.scroll-view').observe('.ball .ball2', res => {
  11.             console.log('observe', res);
  12.             this.setData('appear', res.intersectionRatio > 0);
  13.         });
  14.         this.intersectionObserver = intersectionObserver;
  15.     },
  16.     onUnload() {
  17.         this.intersectionObserver && this.intersectionObserver.disconnect();
  18.     }
  19. });