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 返回参数

  1. uni.createSelectorQuery().selectViewport().scrollOffset(res => {
  2. console.log("竖直滚动位置" + res.scrollTop);
  3. }).exec();
  4. let view = uni.createSelectorQuery().in(this).select(".test");
  5. view.fields({
  6. size: true,
  7. scrollOffset: true
  8. }, data => {
  9. console.log("得到节点信息" + JSON.stringify(data));
  10. console.log("节点的宽为" + data.width);
  11. }).exec();
  12. view.boundingClientRect(data => {
  13. console.log("得到布局位置信息" + JSON.stringify(data));
  14. console.log("节点离页面顶部的距离为" + data.top);
  15. }).exec();