百度智能小程序 创建IntersectionObserver

swan.createIntersectionObserver

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

方法参数

Object object

options 参数说明

示例

代码示例 1: 

在开发者工具中打开

<view class="wrap">
    <view class="message">
        <text s-if="appear">小球出现</text>
        <text s-else>小球消失</text>
    </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>

Page({
    data: {
        appear: false
    },
    onLoad() {
        this.intersectionObserver = swan.createIntersectionObserver(this);
        // 监测 scroll-view 可视区域和小球元素节点的相交情况
        console.log('swan.createIntersectionObserve的可选值', this.intersectionObserver._options);
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball', res => {
                console.log('observe', res);
                // boundingClientRect: 目标边界，这里指小球的位置情况，这个位置是相对于整个页面的，不是相对于参照元素的 scroll-view 的
                // dataset: 观察对象携带的数据。
                // id: 观察对象的 id，它与上面的 dataset 多使用于一次观察多个对象的场景，用于区分不同的对象。
                // intersectionRatio: 相交比例，为 0 时说明两者不相交。
                // intersectionRect: 相交区域，height 为 0 时说明此时没有相交。
                // relativeRect: 参照区域的边界，作为参考物，它的值一般是不会变的。可以对比它于开始相交时一直没变，因为它就是一个 scroll-view 的组件在页面上呈现出的位置信息。
                // time: 监测到两者相交时的时间戳
                this.setData('appear', res.intersectionRatio > 0);
        });
    },
    onUnload() {
        this.intersectionObserver && this.intersectionObserver.disconnect();
    }
});

.wrap {
    padding-top: 30rpx;
}

.message {
    display: flex;
    width: 100%;
    margin: 50rpx 0;
    justify-content: center;
    font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
    font-size: 40rpx;
}

.scroll-view {
    height: 400rpx;
    background: #fff;
}

.scroll-area {
    display: flex;
    flex-direction: column;
    height: 1300rpx;
    transition: .5s;
    align-items: center;
}

.notice {
    margin-top: 150rpx;
}

.filling {
    height: 400rpx;
}

.ball {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background: #38f;
}

代码示例 2: options 为 thresholds 时 

在开发者工具中打开

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

代码示例 3: options 为 initialRatio 时 

在开发者工具中打开

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

代码示例 4: options 为 selectAll 时

在开发者工具中打开

Page({
    data: {
        appear: false
    },
    onReady() {
        this.intersectionObserver = swan.createIntersectionObserver(this, {
            selectAll: true
        });
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball, .ball2', res => {
                console.log('observe', res)
                this.setData('appear', res.intersectionRatio > 0);
        });
    },
    onUnload() {
        this.intersectionObserver && this.intersectionObserver.disconnect();
    }
});