Tips:
- 自定义组件编译模式(默认模式),需要使用到
selectorQuery.in
方法。
查询节点信息的对象
将选择器的选取范围更改为自定义组件 component
内,返回一个 SelectorQuery
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
代码示例
selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器 selector
的节点,返回一个 NodesRef
对象实例,可以用于获取节点信息。
selector 说明:
- ID选择器:
#the-id
- class选择器(可以连续指定多个):
.a-class.another-class
- 子元素选择器:
.the-parent > .the-child
- 后代选择器:
.the-ancestor .the-descendant
- 跨自定义组件的后代选择器:
.the-ancestor >>> .the-descendant
- 多选择器的并集:
#a-node, .some-other-nodes
selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器 selector
的所有节点,返回一个 NodesRef
对象实例,可以用于获取节点信息。
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef
对象实例。
selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
用于获取节点信息的对象
nodesRef.fields(object,callback)
获取节点的相关信息。第一个参数是节点相关信息配置(必选);第二参数是方法的回调函数,参数是指定的相关节点信息。
object 参数说明
callback 返回参数
nodesRef.scrollOffset(callback)
添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view
或者 viewport
。返回 NodesRef
对应的 SelectorQuery
。
callback 返回参数
nodesRef.context(callback)
添加节点的 Context 对象查询请求。支持 、、和 等的获取。
平台差异说明
callback 返回参数
uni.createSelectorQuery().selectViewport().scrollOffset(res => {
console.log("竖直滚动位置" + res.scrollTop);
}).exec();
let view = uni.createSelectorQuery().in(this).select(".test");
view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width);
}).exec();
view.boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();