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

swan.createIntersectionObserver

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

方法參數(shù)

Object object

options 參數(shù)說明

示例

代碼示例 1: 

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

<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">向下滾動讓小球出現(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)測 scroll-view 可視區(qū)域和小球元素節(jié)點的相交情況
        console.log('swan.createIntersectionObserve的可選值', this.intersectionObserver._options);
        this.intersectionObserver
            .relativeTo('.scroll-view')
            .observe('.ball', res => {
                console.log('observe', res);
                // boundingClientRect: 目標(biāo)邊界，這里指小球的位置情況，這個位置是相對于整個頁面的，不是相對于參照元素的 scroll-view 的
                // dataset: 觀察對象攜帶的數(shù)據(jù)。
                // id: 觀察對象的 id，它與上面的 dataset 多使用于一次觀察多個對象的場景，用于區(qū)分不同的對象。
                // intersectionRatio: 相交比例，為 0 時說明兩者不相交。
                // intersectionRect: 相交區(qū)域，height 為 0 時說明此時沒有相交。
                // relativeRect: 參照區(qū)域的邊界，作為參考物，它的值一般是不會變的?？梢詫Ρ人陂_始相交時一直沒變，因為它就是一個 scroll-view 的組件在頁面上呈現(xiàn)出的位置信息。
                // time: 監(jiān)測到兩者相交時的時間戳
                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 時 

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

Page({
    data: {
        appear: false
    },
    onReady() {
        this.intersectionObserver = swan.createIntersectionObserver(this, {
            // 閾值數(shù)量設(shè)置少，避免觸發(fā)過于頻繁導(dǎo)致性能問題
            // 通常會設(shè)置為 1，表示元素要完全展示在頁面上才會進(jìn)行記錄
            thresholds: [0, 0.5, 1]
        });
        // 監(jiān)測 scroll-view 可視區(qū)域和小球元素節(jié)點的相交情況
        // 配置 thresholds:[1]，那么當(dāng)監(jiān)聽對象和參照物相交比例達(dá)到 1 時，會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)
        console.log('監(jiān)聽實例', 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 時 

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

Page({
    data: {
        appear: false
    },
    onReady() {
        this.intersectionObserver = swan.createIntersectionObserver(this, {
            // 初始相交比例，默認(rèn) 0，達(dá)到 initialRatio 或 thresholds 中的閾值時，回調(diào)被觸發(fā)
            initialRatio: 1
        });
        // 監(jiān)測scroll-view可視區(qū)域 和 小球元素節(jié)點的相交情況
        // 配置了 thresholds：[1]，那么當(dāng)監(jiān)聽對象和參照物相交比例達(dá)到 1 時，會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)
        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 時

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

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