创建并返回一个 对象实例。

平台差异说明

margins 参数： 用来扩展（或收缩）参照节点布局区域的边界。

下面的示例代码中，如果目标节点 ".test" 进入 ".scroll" 区域以下 100px 时，就会触发回调函数。

Tips

  • 与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如 fixed 定位的节点）。
  • 节点交互状态 API 建议在 onReady 生命周期里监听，因为此 API 需要查找页面元素，onReady 时页面已经完成初次渲染，已经能查找到对应的元素。
  1. <template>
  2.     <view class="container">
  3.         <text>{{appear ? '小球出现' : '小球消失'}}</text>
  4.         <view class="page-section">
  5.             <scroll-view class="scroll-view" scroll-y>
  6.                 <view class="scroll-area">
  8.                     <view class="ball"></view>
  9.                 </view>
  10.             </scroll-view>
  11.         </view>
  12.     </view>
  13. </template>
  14. <script>
  15.     let observer = null;
  16.     export default {
  17.         data() {
  18.             return {
  19.                 appear: false
  20.             }
  21.         onReady() {
  22.             observer = uni.createIntersectionObserver(this);
  23.             observer.relativeTo('.scroll-view').observe('.ball', (res) => {
  24.               if (res.intersectionRatio > 0 && !this.appear) {
  25.                 this.appear = true;
  26.               } else if (!res.intersectionRatio > 0 && this.appear) {
  27.                 this.appear = false;
  28.               }
  29.             })
  30.         },
  31.         onUnload() {
  32.             if (observer) {
  33.                 observer.disconnect()
  34.             }
  35.         }
  36.     }
  37. </script>
  39.     view,page {
  40.         display: flex;
  41.         flex-direction: column;
  42.     }
  44.     .scroll-view {
  45.         background: #fff;
  46.         border: 1px solid #ccc;
  47.         box-sizing: border-box;
  48.     }
  50.     .scroll-area {
  51.         height: 1300rpx;
  52.         display: flex;
  53.         flex-direction: column;
  54.         align-items: center;
  55.         transition: .5s;
  56.     }
  58.     .notice {
  59.         margin-top: 150rpx;
  60.         margin: 150rpx 0 400rpx 0;
  61.     }
  63.     .ball {
  64.         width: 200rpx;
  65.         height: 200rpx;
  66.         background: #1AAD19;
  67.         border-radius: 50%;
  68.     }

发现错误？想参与编辑？