swan.createIntersectionObserver

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

方法参数

Object object

options参数说明

属性名类型必填默认值说明
thresholdsArray[0]一个数值数组,包含所有阈值。
initialRationumber0初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。
selectAllbooleanfalse是否同时观测多个目标节点(而非一个),如果设为 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. }
  4. .scroll-view {
  5. height: 400rpx;
  6. background: #fff;
  7. }
  8. .scroll-area {
  9. height: 1300rpx;
  10. display: flex;
  11. flex-direction: column;
  12. align-items: center;
  13. transition: .5s;
  14. }
  15. .notice {
  16. margin-top: 150rpx;
  17. }
  18. .ball {
  19. width: 200rpx;
  20. height: 200rpx;
  21. background: #38f;
  22. border-radius: 50%;
  23. }
  24. .filling {
  25. height: 400rpx;
  26. }
  27. .message {
  28. margin: 50rpx 0;
  29. width: 100%;
  30. display: flex;
  31. justify-content: center;
  32. }
  33. .message text {
  34. font-size: 40rpx;
  35. font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
  36. }

代码示例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 时,会触发监听器的回调函数
  12. intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  13. console.log('observe', res)
  14. // intersectionRatio: 相交比例,为0时说明两者不相交。
  15. this.setData('appear', res.intersectionRatio > 0);
  16. });
  17. this.intersectionObserver = intersectionObserver;
  18. },
  19. onUnload() {
  20. this.intersectionObserver && this.intersectionObserver.disconnect();
  21. }
  22. });

代码示例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 时,会触发监听器的回调函数
  12. intersectionObserver.relativeTo('.scroll-view').observe('.ball', res => {
  13. console.log('observe', res)
  14. // intersectionRatio: 相交比例,这里为 1 时说明两者不相交。
  15. this.setData('appear', res.intersectionRatio > 0);
  16. });
  17. this.intersectionObserver = intersectionObserver;
  18. },
  19. onUnload() {
  20. this.intersectionObserver && this.intersectionObserver.disconnect();
  21. }
  22. });

代码示例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. });