百度智能小程序 創(chuàng)建IntersectionObserver

swan.createIntersectionObserver

解釋： 創(chuàng)建并返回一個(gè) IntersectionObserver 對(duì)象實(shí)例。在自定義組件中，可以使用 this.createIntersectionObserver([options]) 來(lái)代替。

方法參數(shù)

Object object

options 參數(shù)說(shuō)明

示例

代碼示例 1: 

在開(kāi)發(fā)者工具中打開(kāi)

<view class="wrap">
    <view class="message">
        <text s-if="appear">小球出現(xiàn)</text>
        <text s-else>小球消失</text>
    </view>
    <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
            <text class="notice">向下滾動(dòng)讓小球出現(xiàn)</text>
            <view class="filling"></view>
            <view class="ball"></view>
        </view>
    </scroll-view> 
</view>

Page({
    data: {
        appear: false
    },
    onLoad() {
        this.intersectionObserver = swan.createIntersectionObserver(this);
        // 監(jiān)測(cè) scroll-view 可視區(qū)域和小球元素節(jié)點(diǎn)的相交情況
        console.log('swan.createIntersectionObserve的可選值', this.intersectionObserver._options);
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball', res => {
                console.log('observe', res);
                // boundingClientRect: 目標(biāo)邊界，這里指小球的位置情況，這個(gè)位置是相對(duì)于整個(gè)頁(yè)面的，不是相對(duì)于參照元素的 scroll-view 的
                // dataset: 觀察對(duì)象攜帶的數(shù)據(jù)。
                // id: 觀察對(duì)象的 id，它與上面的 dataset 多使用于一次觀察多個(gè)對(duì)象的場(chǎng)景，用于區(qū)分不同的對(duì)象。
                // intersectionRatio: 相交比例，為 0 時(shí)說(shuō)明兩者不相交。
                // intersectionRect: 相交區(qū)域，height 為 0 時(shí)說(shuō)明此時(shí)沒(méi)有相交。
                // relativeRect: 參照區(qū)域的邊界，作為參考物，它的值一般是不會(huì)變的。可以對(duì)比它于開(kāi)始相交時(shí)一直沒(méi)變，因?yàn)樗褪且粋€(gè) scroll-view 的組件在頁(yè)面上呈現(xiàn)出的位置信息。
                // time: 監(jiān)測(cè)到兩者相交時(shí)的時(shí)間戳
                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 時(shí) 

在開(kāi)發(fā)者工具中打開(kāi)

Page({
    data: {
        appear: false
    },
    onReady() {
        this.intersectionObserver = swan.createIntersectionObserver(this, {
            // 閾值數(shù)量設(shè)置少，避免觸發(fā)過(guò)于頻繁導(dǎo)致性能問(wèn)題
            // 通常會(huì)設(shè)置為 1，表示元素要完全展示在頁(yè)面上才會(huì)進(jìn)行記錄
            thresholds: [0, 0.5, 1]
        });
        // 監(jiān)測(cè) scroll-view 可視區(qū)域和小球元素節(jié)點(diǎn)的相交情況
        // 配置 thresholds:[1]，那么當(dāng)監(jiān)聽(tīng)對(duì)象和參照物相交比例達(dá)到 1 時(shí)，會(huì)觸發(fā)監(jiān)聽(tīng)器的回調(diào)函數(shù)
        console.log('監(jiān)聽(tīng)實(shí)例', this.intersectionObserver);
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball', res => {
                console.log('observe', res);
                // intersectionRatio: 相交比例，為 0 時(shí)說(shuō)明兩者不相交。
                this.setData('appear', res.intersectionRatio > 0);
            });
    },
    onUnload() {
        this.intersectionObserver && this.intersectionObserver.disconnect();
    }
});

代碼示例 3: options 為 initialRatio 時(shí) 

在開(kāi)發(fā)者工具中打開(kāi)

Page({
    data: {
        appear: false
    },
    onReady() {
        this.intersectionObserver = swan.createIntersectionObserver(this, {
            // 初始相交比例，默認(rèn) 0，達(dá)到 initialRatio 或 thresholds 中的閾值時(shí)，回調(diào)被觸發(fā)
            initialRatio: 1
        });
        // 監(jiān)測(cè)scroll-view可視區(qū)域 和 小球元素節(jié)點(diǎn)的相交情況
        // 配置了 thresholds：[1]，那么當(dāng)監(jiān)聽(tīng)對(duì)象和參照物相交比例達(dá)到 1 時(shí)，會(huì)觸發(fā)監(jiān)聽(tīng)器的回調(diào)函數(shù)
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball', res => {
                console.log('observe', res);
                // intersectionRatio: 相交比例，這里為 0 時(shí)說(shuō)明兩者不相交。
                this.setData('appear', res.intersectionRatio > 0);
        });
    },
    onUnload() {
        this.intersectionObserver && this.intersectionObserver.disconnect();
    }
});

代碼示例 4: options 為 selectAll 時(shí)

在開(kāi)發(fā)者工具中打開(kāi)

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();
    }
});