文档

# NodesRef

用于获取 QML 节点信息的对象

QQ mac版本：支持

QQ windows版本：支持

# 方法

# NodesRef.fields(Object fields)

获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery

# SelectorQuery NodesRef.boundingClientRect(NodesRef.boundingClientRectCallback callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

# SelectorQuery NodesRef.scrollOffset(NodesRef.scrollOffsetCallback callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport，返回 NodesRef 对应的 SelectorQuery。

# SelectorQuery NodesRef.context(NodesRef.contextCallback callback)

添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的获取。

# .boundingClientRect

# SelectorQuery NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

# 参数

# function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

# 参数

Object res

属性 类型 说明
id string 节点的 ID
dataset Object 节点的 dataset
left number 节点的左边界坐标
right number 节点的右边界坐标
top number 节点的上边界坐标
bottom number 节点的下边界坐标
width number 节点的宽度
height number 节点的高度

# 返回值

# SelectorQuery

# 示例代码

Page({
  getRect() {
    qq.createSelectorQuery().select('#the-id').boundingClientRect(function (rect) {
      rect.id // 节点的ID
      rect.dataset // 节点的dataset
      rect.left // 节点的左边界坐标
      rect.right // 节点的右边界坐标
      rect.top // 节点的上边界坐标
      rect.bottom // 节点的下边界坐标
      rect.width // 节点的宽度
      rect.height // 节点的高度
    }).exec()
  },
  getAllRects() {
    qq.createSelectorQuery().selectAll('.a-class').boundingClientRect(function (rects) {
      rects.forEach(function (rect) {
        rect.id // 节点的ID
        rect.dataset // 节点的dataset
        rect.left // 节点的左边界坐标
        rect.right // 节点的右边界坐标
        rect.top // 节点的上边界坐标
        rect.bottom // 节点的下边界坐标
        rect.width // 节点的宽度
        rect.height // 节点的高度
      })
    }).exec()
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# .context

# SelectorQuery NodesRef.context(function callback)

添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的获取。

# 参数

# function callback

回调函数，在执行 SelectorQuery.exec 方法后，返回节点信息。

# 参数

Object res

属性 类型 说明
context Object 节点对应的 Context 对象

# 返回值

# SelectorQuery

# 示例代码

Page({
  getContext() {
    qq.createSelectorQuery().select('.the-video-class').context(function (res) {
      console.log(res.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
    }).exec()
  }
})
1
2
3
4
5
6
7

# .fields

# NodesRef.fields(Object fields)

获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery

# 参数

# Object fields
属性 类型 默认值 必填 说明 最低版本
id boolean false 否 是否返回节点 id
dataset boolean false 否 是否返回节点 dataset
rect boolean false 否 是否返回节点布局位置（left right top bottom）
size boolean false 否 是否返回节点尺寸（width height）
scrollOffset boolean false 否 否 是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties Array.<string> [] 否 指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取）
computedStyle Array.<string> [] 否 指定样式名列表，返回节点对应样式名的当前值
context boolean false 否 是否返回节点对应的 Context 对象

# 注意

computedStyle 的优先级高于 size，当同时在 computedStyle 里指定了 width/height 和传入了 size: true，则优先返回 computedStyle 获取到的 width/height。

# 示例代码

Page({
  getFields() {
    qq.createSelectorQuery().select('#the-id').fields({
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY'],
      computedStyle: ['margin', 'backgroundColor'],
      context: true,
    }, function (res) {
      res.dataset // 节点的dataset
      res.width // 节点的宽度
      res.height // 节点的高度
      res.scrollLeft // 节点的水平滚动位置
      res.scrollTop // 节点的竖直滚动位置
      res.scrollX // 节点 scroll-x 属性的当前值
      res.scrollY // 节点 scroll-y 属性的当前值
      // 此处返回指定要返回的样式名
      res.margin
      res.backgroundColor
      res.context // 节点对应的 Context 对象
    }).exec()
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# .scrollOffset

# SelectorQuery NodesRef.scrollOffset(function callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport，返回 NodesRef 对应的 SelectorQuery。

# 参数

# function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

# 参数

Object res

属性 类型 说明
id string 节点的 ID
dataset Object 节点的 dataset
scrollLeft number 节点的水平滚动位置
scrollTop number 节点的竖直滚动位置

# 返回值

# SelectorQuery

# 示例代码

Page({
  getScrollOffset() {
    qq.createSelectorQuery().selectViewport().scrollOffset(function (res) {
      res.id // 节点的ID
      res.dataset // 节点的dataset
      res.scrollLeft // 节点的水平滚动位置
      res.scrollTop // 节点的竖直滚动位置
    }).exec()
  }
})
1
2
3
4
5
6
7
8
9
10

← SelectorQuery →