• uni.createIntersectionObserver([this], [options])
  • IntersectionObserver 对象的方法列表
  • 代码示例

    节点布局交叉状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

    uni.createIntersectionObserver([this], [options])

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

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √HBuilderX 2.0.4+√√√√

    options 的可选参数为：

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

    IntersectionObserver 对象的方法列表

    方法说明
    IntersectionObserver.relativeTo(selector,[margins])使用选择器指定一个节点，作为参照区域之一。
    IntersectionObserver.relativeToViewport([margins])指定页面显示区域作为参照区域之一
    IntersectionObserver.observe(selector,[callback])指定目标节点并开始监听相交状态变化情况。回调函数 callback 包含一个参数 result
    IntersectionObserver.disconnect()停止监听。回调函数将不再触发。

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

    属性类型默认值是否必填说明
    leftnumber否节点布局区域的左边界
    rightnumber否节点布局区域的右边界
    topnumber否节点布局区域的上边界
    bottomnumber否节点布局区域的下边界

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

    1. uni.createIntersectionObserver(this).relativeTo('.scroll',{bottom: 100}}).observe('.test', (res) => {
    2.   console.log(res);
    3. })

    observe 回调函数 result 包含的字段

    字段名类型说明
    intersectionRatioNumber相交比例
    intersectionRectObject相交区域的边界，包含 left、right、top、bottom 四项
    boundingClientRectObject目标节点布局区域的边界，包含 left、right、top、bottom 四项
    relativeRectObject参照区域的边界，包含 left、right、top、bottom 四项
    timeNumber相交检测时的时间戳

    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">
    7.                     <text class="notice">向下滚动让小球出现</text>
    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.         },
    22.         onReady() {
    23.             observer = uni.createIntersectionObserver(this);
    24.             observer.relativeTo('.scroll-view').observe('.ball', (res) => {
    25.               if (res.intersectionRatio > 0 && !this.appear) {
    26.                 this.appear = true;
    27.               } else if (!res.intersectionRatio > 0 && this.appear) {
    28.                 this.appear = false;
    29.               }
    30.             })
    31.         },
    32.         onUnload() {
    33.             if (observer) {
    34.                 observer.disconnect()
    35.             }
    36.         }
    37.     }
    38. </script>
    39. <style>
    40.     view,page {
    41.         display: flex;
    42.         flex-direction: column;
    43.     }
    45.     .scroll-view {
    46.         height: 400rpx;
    47.         background: #fff;
    48.         border: 1px solid #ccc;
    49.         box-sizing: border-box;
    50.     }
    52.     .scroll-area {
    53.         height: 1300rpx;
    54.         display: flex;
    55.         flex-direction: column;
    56.         align-items: center;
    57.         transition: .5s;
    58.     }
    60.     .notice {
    61.         margin-top: 150rpx;
    62.         margin: 150rpx 0 400rpx 0;
    63.     }
    65.     .ball {
    66.         width: 200rpx;
    67.         height: 200rpx;
    68.         background: #1AAD19;
    69.         border-radius: 50%;
    70.     }
    71. </style>

    发现错误？想参与编辑？在 GitHub 上编辑此页面！