IntersectionObserver mc.createIntersectionObserver(Object component, Object options)
创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createIntersectionObserver([options]) 来代替。
参数
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| component | Object | 是 | 自定义组件实例 | |
| options | Object | 否 | 选项 |
Object options
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| thresholds | Array. |
[0] | 否 | 一个数值数组，包含所有阈值。 |
| initialRatio | Number | 0 | 否 | 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。 |
| observeAll | Boolean | false | 否 | 是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能） |
示例代码：
<!--pages/api/pages/intersection/intersection.mcml-->
<view>
<text mc:if="{{appear}}">
小球出现
</text>
<text mc:else>
小球消失
</text>
</view>
<view>
<scroll-view class="scroll-view" scroll-y>
<view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
<text class="notice">向下滚动让小球出现</text>
<view class="filling"></view>
<view class="ball"></view>
</view>
</scroll-view>
</view>
/* pages/api/pages/intersection/intersection.mcss */
.scroll-view {
height: 400rpx;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
}
.notice {
margin-top: 150rpx;
}
.ball {
width: 200rpx;
height: 200rpx;
background: #1AAD19;
border-radius: 50%;
}
.filling {
height: 400rpx;
}
.message {
width: 100%;
display: flex;
justify-content: center;
}
.message text {
font-size: 40rpx;
font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
}
// pages/api/pages/intersection/intersection.js
Page({
data: {
appear: false
},
onLoad() {
this._observer = mc.createIntersectionObserver(this);
this._observer.relativeTo('.scroll-view');
}
})