swan.createIntersectionObserver

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

方法参数

Object object

options 参数说明

属性名类型必填默认值说明

thresholds

Array

否

[0]

一个数值数组，包含所有阈值

initialRatio

number

否

0

初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数

selectAll

Boolean

否

false

是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）

示例

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例 1

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  • CSS
  1. <view class="wrap">
  2.     <view class="message">
  3.         <text s-if="appear">小球出现</text>
  4.         <text s-else>小球消失</text>
  5.     </view>
  6.     <scroll-view class="scroll-view" scroll-y>
  7.         <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
  8.             <text class="notice">向下滚动让小球出现</text>
  9.             <view class="filling"></view>
  10.             <view class="ball"></view>
  11.         </view>
  12.     </scroll-view> 
  13. </view>

代码示例 2：options 为 thresholds 时

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

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

代码示例 3：options 为 initialRatio 时

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

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

代码示例 4：options 为 selectAll 时

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

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