当开发需要指定目标节点的属性,位置等信息前,需要获取页面节点信息,当前开发指导提供获取页面节点信息的方法。
节点信息查询接口可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是查询某个节点的当前位置,以及界面的滚动位置,示例代码:
const query = has.createSelectorQuery();
query.select('#elem-id').boundingClientRect(function (res) {
const top = res.top; // 上边距
console.info(`boundingClientRect, top: ${top}`);
});
query.selectViewport().scrollOffset(function (res) {
const scrollTop = res.scrollTop; // 显示区域的垂直滚动位置
console.info(`scrollOffset, scrollTop: ${scrollTop}`);
});
query.exec(); 上述示例中, #elem-id是一个节点选择器,与CSS的选择器相近但略有区别,请参见SelectorQuery.select的相关说明。
在自定义组件或包含自定义组件的页面中,推荐使用this.createSelectorQuery来代替has.createSelectorQuery,这样可以确保在正确的范围内选择节点。
节点布局相交状态接口 has.createIntersectionObserver 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组接口常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
这一组API涉及的主要概念如下:
以下示例代码可以在目标节点(用选择器 .target-elem 指定)每次进入或离开页面显示区域时,触发回调函数。
Page({
onLoad: function () {
this.createIntersectionObserver().relativeToViewport().observe('.target-elem-class', (res) => {
const id = res.id; // 目标节点 id
const dataset = res.dataset; // 目标节点 dataset
const intersectionRatio = res.intersectionRatio; // 相交区域占目标节点的布局区域的比例
const intersectionRect = res.intersectionRect; // 相交区域
const left = intersectionRect.left; // 相交区域的左边界坐标
const top = res.intersectionRect.top; // 相交区域的上边界坐标
const width = res.intersectionRect.width; // 相交区域的宽度
const height = res.intersectionRect.height; // 相交区域的高度
console.info(`relativeToViewport, observe, id: ${id}`);
console.info(`relativeToViewport, observe, intersectionRect: [${left}, ${top}, ${width}, ${height}]`);
});
}
}); 在自定义组件或包含自定义组件的页面中,推荐使用this.createIntersectionObserver来代替has.createIntersectionObserver,这样可以确保在正确的范围内选择节点。