节点信息

qh.createIntersectionObserver

解释： 创建并返回一个 IntersectionObserver 对象实例。

方法参数：Object options

options参数说明：

• 在 html 文件中

<scroll-view class="scroll-view" scroll-y>
    <se-view class="scroll-area" v-bind:style="{ 'background': appear ? '#ccc' : '' }">
        <se-view class="filling"></se-view>
        <se-view class="ball"></se-view>
    </se-view>
</scroll-view>

• 在 js 文件中

Page({
    data() {
        return {
            appear: false
        }
    },
    mounted() {
        const observer = qh.createIntersectionObserver(this);
        observer.relativeTo('.scroll-view').observe('.ball', res => {
            console.log('observe', res)
            this.appear = res.intersectionRatio > 0;
        });
        this.observer = observer;
    },
    onUnload() {
        this.observer && this.observer.disconnect();
    }
});

• 在 css 文件中

.scroll-view {
    height: 400px;
    background: #fff;
    background-color: #fff;
}
.scroll-area {
    height: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .5s;
}
.ball {
    width: 200px;
    height: 200px;
    background: #38f;
    border-radius: 50%;
}
.filling {
    height: 400px;
}

IntersectionObserver

解释： IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

IntersectionObserver对象的方法列表：

IntersectionObserver.relativeTo

解释：使用选择器指定一个节点，作为参照区域之一。

方法参数：String selector, Object margins

selector参数说明:选择器

margins参数说明:用来扩展（或收缩）参照节点布局区域的边界

IntersectionObserver.relativeToViewport

解释：指定页面显示区域作为参照区域之一

方法参数：Object margins

margins参数说明:用来扩展（或收缩）参照节点布局区域的边界

IntersectionObserver.observe

解释：指定目标节点并开始监听相交状态变化情况

方法参数：String targetSelector, Function callback

targetSelector参数说明：选择器

callback参数说明：监听相交状态变化的回调函数

回调结果说明

intersectionRect、boundingClientRect、relativeRect 结构说明

示例：

qh.createIntersectionObserver(this, {
    selectAll: true
})
.relativeTo('.container')
.observe('.ball', res => {
    console.log(res.intersectionRect); // 相交区域
    console.log(res.intersectionRect.left); // 相交区域的左边界坐标
    console.log(res.intersectionRect.top); // 相交区域的上边界坐标
    console.log(res.intersectionRect.width); // 相交区域的宽度
    console.log(res.intersectionRect.height); // 相交区域的高度
});

IntersectionObserver.disconnect

与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。

解释：停止监听，回调函数将不再触发。

方法参数：无

qh.createSelectorQuery

解释： 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

方法参数： 无

返回值：selectorQuery

示例：

• 在 html 文件中

<div>
    <div class="test-wrap">Test</div>
    <se-button type="primary" @click="queryNodeInfo">获取节点信息</se-button>
</div>

• 在 js 文件中

Page({
    methods: {
        queryNodeInfo() {
            const query = qh.createSelectorQuery();
            query.select('.test-wrap').boundingClientRect();
            query.exec(res => {
                const rect = res[0]
                if (rect) {
                    const metrics = []
                    for (const key in rect) {
                        if (key !== 'id' && key !== 'dataset') {
                            const val = rect[key]
                            metrics.push({key, val})
                        }
                    }
                    console.log({metrics})
                }
            });
        }
    }

});

selectorQuery.in

解释： 将选择器的选取范围更改为自定义组件 component 内（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

方法参数：Component component

示例：

Page({
    methods: {
        queryMultipleNodes(){
            const query = qh.createSelectorQuery().in(this)
            query.select('#the-id').boundingClientRect(function(res){
                res.top // 这个组件内 #the-id 节点的上边界坐标
            }).exec()
        }
    }
});

selectorQuery.select

解释： 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

方法参数：String selector

返回值：nodesRef

selector 类似于 CSS 的选择器，但仅支持下列语法。

1、ID 选择器：#the-id

2、class 选择器（可以连续指定多个）：.a-class.another-class

3、子元素选择器：.the-parent > .the-child

4、后代选择器：.the-ancestor .the-descendant

5、多选择器的并集：#a-node, .some-other-nodes

selectorQuery.selectAll

解释： 在当前页面下选择匹配选择器 selector 的节点，返回一个 NodesRef 对象实例。 与 selectorQuery.select(selector) 不同的是，它选择所有匹配选择器的节点。

方法参数：String selector

返回值：nodesRef

selectorQuery.exec

解释： 执行所有的请求，请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

方法参数：Function callback

nodesRef

解释： 节点信息

nodesRef.boundingClientRect

解释： 添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回值是 nodesRef 对应的 selectorQuery。

方法参数：Function callback

返回的节点信息中，每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数，在执行 selectQuery 的 exec 方法后，节点信息会在 callback 中返回。

示例：

Page({
    methods: {
        getRect (){
            qh.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
                rect.id      // 节点的ID
                rect.dataset // 节点的dataset
                rect.left    // 节点的左边界坐标
                rect.right   // 节点的右边界坐标
                rect.top     // 节点的上边界坐标
                rect.bottom  // 节点的下边界坐标
                rect.width   // 节点的宽度
                rect.height  // 节点的高度
            }).exec()
        },
        getAllRects (){
            qh.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
                rects.forEach(function(rect){
                    rect.id      // 节点的ID
                    rect.dataset // 节点的dataset
                    rect.left    // 节点的左边界坐标
                    rect.right   // 节点的右边界坐标
                    rect.top     // 节点的上边界坐标
                    rect.bottom  // 节点的下边界坐标
                    rect.width   // 节点的宽度
                    rect.height  // 节点的高度
                })
            }).exec()
        }
    }
});

nodesRef.fields

解释： 获取节点的相关信息，需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery 。可指定获取的字段包括：

方法参数：Object fields, Function callback

fields参数说明：

示例：

Page({
    methods: {
        getFields (){
            qh.createSelectorQuery().select('#the-id').fields({
                dataset: true,
                size: true,
                scrollOffset: true,
                properties: ['scrollX', 'scrollY'],
                computedStyle: ['margin', 'backgroundColor']
            }, function(res){
                res.dataset    // 节点的dataset
                res.width      // 节点的宽度
                res.height     // 节点的高度
                res.scrollLeft // 节点的水平滚动位置
                res.scrollTop  // 节点的竖直滚动位置
                res.scrollX    // 节点 scroll-x 属性的当前值
                res.scrollY    // 节点 scroll-y 属性的当前值
                // 此处返回指定要返回的样式名
                res.margin
                res.backgroundColor
            }).exec()
        }
    }
});

qh.createIntersectionObserver

解释： 创建并返回一个 IntersectionObserver 对象实例。

方法参数：Object options

options参数说明：

示例：

• 在 html 文件中

<se-scroll-view class="scroll-view"  scroll-y>
    <se-view class="scroll-area" :style="{ 'background': appear ? '#ccc' : '' }">
        <se-view class="filling"></se-view>
        <se-view class="ball"></se-view>
    </se-view>
</se-scroll-view>

• 在 js 文件中

Page({
    data() {
        return {
            appear: false
        };
    },
    mounted() {
        const io = qh.createIntersectionObserver(this);
        io.relativeTo('.scroll-view').observe('.ball', res => {
            this.appear = res.intersectionRatio > 0;
        });
        this.io = io;
    },
    onUnload() {
        this.io && this.io.disconnect();
    }
});

• 在 css 文件中

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

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

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

.filling {
    height: 400px;
}

IntersectionObserver

解释： IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

IntersectionObserver对象的方法列表：

IntersectionObserver.relativeTo

解释：使用选择器指定一个节点，作为参照区域之一。

方法参数：String selector, Object margins

selector参数说明:选择器

margins参数说明:用来扩展（或收缩）参照节点布局区域的边界

IntersectionObserver.relativeToViewport

解释：指定页面显示区域作为参照区域之一

方法参数：Object margins

margins参数说明:用来扩展（或收缩）参照节点布局区域的边界

IntersectionObserver.observe

解释：指定目标节点并开始监听相交状态变化情况

方法参数：String targetSelector, Function callback

targetSelector参数说明：选择器

callback参数说明：监听相交状态变化的回调函数

回调结果说明

intersectionRect、boundingClientRect、relativeRect 结构说明

示例：

qh.createIntersectionObserver(this, {
    selectAll: true
})
.relativeTo('.container')
.observe('.ball', res => {
    console.log(res.intersectionRect); // 相交区域
    console.log(res.intersectionRect.left); // 相交区域的左边界坐标
    console.log(res.intersectionRect.top); // 相交区域的上边界坐标
    console.log(res.intersectionRect.width); // 相交区域的宽度
    console.log(res.intersectionRect.height); // 相交区域的高度
});

IntersectionObserver.disconnect

与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。

解释：停止监听，回调函数将不再触发。

方法参数：无