查询节点信息的对象
执行所有的请求，请求结果按请求次序构成数组，在 callback 的第一个参数中返回。
Page({
data: {
metrics: []
},
onReady() {
this.queryNodeInfo();
},
queryNodeInfo() {
const query = xhs.createSelectorQuery();
query.select('.target').boundingClientRect();
query.exec(res => {
console.log('节点信息：', res[0]);
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});
}
}
this.setData({metrics});
}
});
}
});
将选择器的选取范围更改为自定义组件 component 内（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
// 自定义组件逻辑 (custom.js)
Component({
methods: {
// 不能写在引用自定义组件的页面内
queryMultipleNodes() {
xhs.createSelectorQuery()
.in(this)
.select('.name')
.boundingClientRect(res => {
xhs.showModal({
title: '节点信息为',
content: JSON.stringify(res)
});
}).exec();
}
}
});
在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
类似于 CSS 的选择器，但仅支持下列语法。
Page({
data: {
message: ''
},
onReady() {
this.selectorQuery = xhs.createSelectorQuery();
},
queryNodeInfo() {
console.log(this.selectorQuery.select('.target'));
// nodeRef: selector: ".target", queryType: "select"
this.selectorQuery
.select('.target')
.boundingClientRect()
.exec(res => {
console.log('节点信息：', res[0]);
this.setData('message', res[0].top);
});
}
});
在当前页面下选择匹配选择器 selector 的节点，返回一个 NodesRef 对象实例。 与 selectorQuery.select(selector) 不同的是，它选择所有匹配选择器的节点。
Page({
data: {
targetFirst: '',
targetSecond: ''
},
onReady() {
this.queryNodeInfo();
},
queryNodeInfo() {
const selectorQuery = xhs.createSelectorQuery();
selectorQuery.selectAll('.target').boundingClientRect();
selectorQuery.exec(res => {
this.setData('targetFirst', res[0][0].top);
this.setData('targetSecond', res[0][1].top);
});
}
});
选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例
Page({
selectViewport() {
xhs.createSelectorQuery()
.selectViewport()
.scrollOffset(res => {
console.log('节点信息', res);
// res.id // 节点的ID
// res.dataset // 节点的dataset
// res.scrollLeft // 节点的水平滚动位置
// res.scrollTop // 节点的竖直滚动位置
xhs.showModal({
title: 'title',
content: JSON.stringify(res)
});
}).exec()
}
});