百度智能小程序 创建IntersectionObserver

2020-09-05 14:13 更新

swan.createIntersectionObserver

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

方法参数

Object object

options 参数说明

属性名 类型 必填 默认值 说明

thresholds

Array

[0]

一个数值数组,包含所有阈值。

initialRatio

number

0

初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。

selectAll

Boolean

false

是否同时观测多个目标节点(而非一个),如果设为 true ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能)

示例


代码示例 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();
    }
});


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号