节点信息
node api 暂不支持
Page({
onReady() {
let node = xhs.createSelectorQuery();
// 节点的位置信息，针对普通节点
node.select('node').boundingClientRect(rect => {
})
// 节点的相关信息，针对普通节点
node.select('node').scrollOffset().exec();
// 节点的滚动位置信息，针对特殊节点
node.select('node').fields().exec();
}
});
添加节点的布局位置的查询请求，相对于显示区域（单位：像素）。其功能类似于 DOM 的 getBoundingClientRect 。返回值是 nodesRef 对应的 selectorQuery
参数 | 类型 | 说明 |
|---|---|---|
| left | Number | 节点左边界坐标 |
| right | Number | 节点右边界坐标 |
| top | Number | 节点上边界坐标 |
| bottom | Number | 节点下边界坐标 |
| width | Number | 节点宽度 |
| height | Number | 节点高度 |
Page({
queryNodeInfo() {
xhs.createSelectorQuery()
.select('.target')
.boundingClientRect(rect => {
console.log("节点信息", rect);
xhs.showModal({
title: 'NodesRef.boundingClientRect的返回值',
content: JSON.stringify(rect)
});
}).exec();
}
});
获取节点的相关信息，需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery
参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| id | Boolean | 否 | 是否返回节点 id | |
| dataset | Boolean | 否 | 是否返回节点 dataset | |
| rect | Boolean | 否 | 是否返回节点布局位置（left right top bottom） | |
| size | Boolean | 否 | 是否返回节点尺寸（width height） | |
| scrollOffset | Boolean | 否 | 是否返回节点的 scrollLeft scrollTop ，节点必须是 scroll-view 或者 viewport | |
| computedStyle | Array. | 否 | 指定样式名列表，返回节点对应样式名的当前值 | |
| context | context interface | 否 | 节点的 Context 对象查询请求 |
Page({
data: {
NodesRefData: ''
},
queryNodeInfo() {
xhs.createSelectorQuery()
.select('.scroll-view')
.fields({
id: false,
dataset: false,
rect: true,
size: true,
scrollOffset: true,
computedStyle: ['margin', 'backgroundColor']
}, res => {
console.log('节点信息', res);
this.setData('NodesRefData', JSON.stringify(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();
}
});
添加节点的滚动位置查询请求（单位：像素）。节点必须是 scroll-view 或者 viewport 。返回值是 nodesRef 对应的 selectorQuery
回调函数，在执行 SelectorQuery.exec 方法后，返回节点信息
Page({
getContext () {
xhs.createSelectorQuery().select('.the-video-class').context(function(res){
console.log(res.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
}).exec()
}
})
基础库从 > 3.11.0 开始支持 context
添加节点的 Context 对象查询请求。目前仅支持 VideoContext、EditorContext和 MapContext 的获取
基础库从 > 3.17.x 开始支持 跨组件多 selector 查询场景
xhs.createSelectorQuery()
.select('.scroll-view > .test')
.scrollOffset(res => {
...
}).exec();
}
返回的节点信息中，每个节点的滚动位置用 scrollLeft 、 scrollTop 字段描述。如果提供了 callback 回调函数，在执行 selectQuery 的 exec 方法后，节点信息会在 callback 中返回。
参数 | 类型 | 说明 |
|---|---|---|
| scrollLeft | Number | 节点水平滚动位置 |
| scrollTop | Number | 节点竖直滚动位置 |
Page({
data: {
appear: false
},
onReady() {
this.intersectionObserver = xhs.createIntersectionObserver();
this.intersectionObserver
.relativeTo('.scroll-view')
.observe('.ball', res => {
console.log('observe', res);
this.setData('appear', res.intersectionRatio > 0);
});
},
getNodeRef() {
xhs.createSelectorQuery()
.select('.scroll-view')
.scrollOffset(res => {
console.log('scrollOffset:', res);
xhs.showModal({
title: 'scrollOffset',
content: JSON.stringify(res)
});
}).exec();
}
});