查询节点信息的对象

参考文档

方法

exec

执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。

参考文档

  1. (callback?: (...args: any[]) => any) => NodesRef
参数类型说明
callback(…args: any[]) => any回调函数

API 支持度

API微信小程序H5React Native
SelectorQuery.exec✔️✔️

select

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。

selector 语法

selector类似于 CSS 的选择器,但仅支持下列语法。

  • 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

参考文档

  1. (selector: string) => NodesRef
参数类型说明
selectorstring选择器

示例代码

  1. Taro.createSelectorQuery().select('#the-id').fields({
  2. dataset: true,
  3. size: true,
  4. scrollOffset: true,
  5. properties: ['scrollX', 'scrollY']
  6. }, function (res){
  7. res.dataset // 节点的dataset
  8. res.width // 节点的宽度
  9. res.height // 节点的高度
  10. res.scrollLeft // 节点的水平滚动位置
  11. res.scrollTop // 节点的竖直滚动位置
  12. res.scrollX // 节点 scroll-x 属性的当前值
  13. res.scrollY // 节点 scroll-x 属性的当前值
  14. }).exec()

API 支持度

API微信小程序H5React Native
SelectorQuery.select✔️✔️

selectAll

在当前页面下选择匹配选择器 selector 的所有节点。

selector 语法

selector类似于 CSS 的选择器,但仅支持下列语法。

  • 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

参考文档

  1. (selector: string) => NodesRef
参数类型说明
selectorstring选择器

API 支持度

API微信小程序H5React Native
SelectorQuery.selectAll✔️✔️

selectViewport

选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。

参考文档

  1. () => NodesRef

示例代码

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

API 支持度

API微信小程序H5React Native
SelectorQuery.selectViewport✔️✔️

in

将选择器的选取范围更改为自定义组件 component 内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。

参考文档

  1. (component: Record<string, any>) => SelectorQuery
参数类型说明
componentRecord<string, any>自定义组件实例

示例代码

  1. Component({
  2. queryMultipleNodes () {
  3. const query = Taro.createSelectorQuery().in(this)
  4. query.select('#the-id').boundingClientRect(function(res){
  5. res.top // 这个组件内 #the-id 节点的上边界坐标
  6. }).exec()
  7. }
  8. })

API 支持度

API微信小程序H5React Native
SelectorQuery.in✔️✔️

API 支持度

API微信小程序H5React Native
SelectorQuery.exec✔️✔️
SelectorQuery.select✔️✔️
SelectorQuery.selectAll✔️✔️
SelectorQuery.selectViewport✔️✔️
SelectorQuery.in✔️✔️