返回一个 SelectorQuery 对象实例。
入参
参数 | 类型 | 说明 | 支持平台 |
---|---|---|---|
params | object | 可以指定 page 属性,默认为当前页面 | 支付宝 |
选择当前第一个匹配选择器的节点,选择器支持 id 选择器以及 class 选择器.
返回值 NodesRef
selector 语法 selector 类似于 CSS 的选择器,但仅支持下列语法。
在当前页面下选择匹配选择器 selector 的所有节点。
返回值 NodesRef
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息。
返回值 NodesRef
添加节点的布局位置的查询请求,相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。
返回 NodesRef 对应的 SelectorQuery。
参数
function callback 回调函数,在执行 SelectQuery.exec 方法后,节点信息会在 callbacks 中返回。
Object res
属性 | 类型 | 说明 |
---|---|---|
id | string | 节点的 ID |
dataset | Object | 节点的 dataset |
left | number | 节点的左边界坐标 |
right | number | 节点的右边界坐标 |
top | number | 节点的上边界坐标 |
bottom | number | 节点的下边界坐标 |
width | number | 节点的宽度 |
height | number | 节点的高度 |
添加节点的滚动位置查询请求,以像素为单位。节点必须是 scroll-view 或者 viewport
参数
function callback 回调函数,在执行 SelectQuery.exec 方法后,节点信息会在 callbacks 中返回。
Object res
属性 | 类型 | 说明 |
---|---|---|
id | string | 节点的 ID |
dataset | Object | 节点的 dataset |
scrollLeft | number | 节点的水平滚动位置 |
scrollTop | number | 节点的竖直滚动位置 |
返回 NodesRef 对应的 SelectorQuery。
执行所有的请求,请求结果按请求次序构成数组,在 callback 的第一个参数中返回。
代码示例:
componentDidMount() {
React.api.createSelectorQuery()
.select('#non-exists').boundingClientRect()
.select('#one').boundingClientRect()
.selectAll('.all').boundingClientRect()
.select('#scroll').scrollOffset()
.selectViewport().boundingClientRect()
.selectViewport().scrollOffset().exec((ret) => {
console.log(JSON.stringify(ret, null, 2));
});
}
render() {
return (
<div>
<div className="all">节点 all1</div>
<div className="all">节点 all2</div>
<div id="one">节点 one</div>
<div id="scroll" style="height:200px;overflow: auto">
<div style="height:400px">独立滚动区域</div>
</div>
</div>
);
}
结果 res:
[
null,
{
"x": 1,
"y": 2,
"width": 1367,
"height": 18,
"top": 2,
"right": 1368,
"bottom": 20,
"left": 1
},
[
{
"x": 1,
"y": -34,
"width": 1367,
"height": 18,
"top": -34,
"right": 1368,
"bottom": -16,
"left": 1
},
{
"x": 1,
"y": -16,
"width": 1367,
"height": 18,
"top": -16,
"right": 1368,
"bottom": 2,
"left": 1
}
],
{
"scrollTop": 0,
"scrollLeft": 0
},
{
"width": 1384,
"height": 360
},
{
"scrollTop": 35,
"scrollLeft": 0
}
]