NodesRef

The object for obtaining the WXML node information.

Reference

Methods

boundingClientRect

Adds the request for querying the node layout position (in pixels) relative to the display area. This feature is similar to getBoundingClientRect of DOM. It returns SelectorQuery of NodesRef.

Reference

(callback?: BoundingClientRectCallback) => SelectorQuery

Property	Type	Description
callback	BoundingClientRectCallback	The callback function. After the SelectorQuery.exec method is executed, the node information will be returned incallback.

Sample Code

Example 1

Taro.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
  rect.id      // The ID of the node
  rect.dataset // The dataset of the node
  rect.left    // The left boundary coordinate of the node
  rect.right   // The right boundary coordinate of the node
  rect.top     // The upper boundary coordinate of the node
  rect.bottom  // The lower boundary coordinate of the node
  rect.width   // The width of the node
  rect.height  // The height of the node
}).exec()

Example 2

Taro.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
  rects.forEach(function(rect){
    rect.id      // The ID of the node
    rect.dataset // The dataset of the node
    rect.left    // The left boundary coordinate of the node
    rect.right   // The right boundary coordinate of the node
    rect.top     // The upper boundary coordinate of the node
    rect.bottom  // The lower boundary coordinate of the node
    rect.width   // The width of the node
    rect.height  // The height of the node
  })
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.boundingClientRect	✔️	✔️

context

Adds the request for querying the node Context object. VideoContext, CanvasContext, LivePlayerContext, and MapContext can be obtained.

Reference

(callback?: ContextCallback) => SelectorQuery

Property	Type	Description
callback	ContextCallback	The callback function. After the SelectorQuery.exec method is executed, the node information will be returned.

Sample Code

Taro.createSelectorQuery().select('.the-video-class').context(function (res) {
  console.log(res.context) // The Context object of the node. If the selected node is a <video> component, the VideoContext object is returned.
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.context	✔️

fields

Obtains the information about the node. The fields to be obtained are specified in fields. The selectorQuery of nodesRef is returned.

Note computedStyle has a higher priority than size. When width/height is specified and "size: true" is passed in computedStyle, the width/height obtained by computedStyle is returned first.

Reference

(fields: Fields, callback?: FieldsCallback) => SelectorQuery

Property	Type	Description
fields	Fields
callback	FieldsCallback	Callback function

Sample Code

Taro.createSelectorQuery().select('#the-id').fields({
  dataset: true,
  size: true,
  scrollOffset: true,
  properties: ['scrollX', 'scrollY'],
  computedStyle: ['margin', 'backgroundColor'],
  context: true,
}, function (res) {
  res.dataset    // The dataset of the node
  res.width      // The width of the node
  res.height     // The height of the node
  res.scrollLeft // The horizontal scroll position of the node
  res.scrollTop  // The vertical scroll position of the node
  res.scrollX    // The current value of the node's scroll-x property
  res.scrollY    // The current value of the node's scroll-y property
  // Return the specified style name
  res.margin
  res.backgroundColor
  res.context    // The Context object of the node
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.fields	✔️	✔️

node

Gets the Node node instance. Currently Canvas is supported for fetching.

Reference

(callback?: NodeCallback) => SelectorQuery

Property	Type	Description
callback	NodeCallback	The callback function. After the SelectorQuery.exec method is executed, the node information will be returned in callback.

Sample Code

Taro.createSelectorQuery().select('.canvas').node(function(res){
  console.log(res.node)
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.node	✔️

scrollOffset

Adds the request for querying the node scroll position (in pixels). The node must be scroll-view or viewport. It returns SelectorQuery of NodesRef.

Reference

(callback?: ScrollOffsetCallback) => SelectorQuery

Property	Type	Description
callback	ScrollOffsetCallback	The callback function. After the SelectorQuery.exec method is executed, the node information will be returned in callback.

Sample Code

Taro.createSelectorQuery().selectViewport().scrollOffset(function(res){
  res.id      // The id of the node
  res.dataset // The dataset of the node
  res.scrollLeft // The horizontal scroll position of the node
  res.scrollTop  // The vertical scroll position of the node
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.scrollOffset	✔️	✔️

Parameters

BoundingClientRectCallback

The callback function. After the SelectorQuery.exec method is executed, the node information will be returned in callback.

(result: BoundingClientRectCallbackResult) => void

Property	Type
result	BoundingClientRectCallbackResult

BoundingClientRectCallbackResult

Property	Type	Description
dataset	Record<string, any>	The dataset of the node
id	string	The ID of the node
bottom	number	The lower boundary coordinate of the node
left	number	The left boundary coordinate of the node
right	number	The right boundary coordinate of the node
top	number	The upper boundary coordinate of the node
height	number	The height of the node
width	number	The width of the node

ContextCallback

The callback function. After the SelectorQuery.exec method is executed, the node information will be returned.

(result: ContextCallbackResult) => void

Property	Type
result	ContextCallbackResult

ContextCallbackResult

Property	Type	Description
context	Record<string, any>	The Context object of the node

Fields

Property	Type	Required	Description
computedStyle	string[]	No	Specifies the style name list and returns the current value of the node style name
context	boolean	No	Indicates whether to return the Context object of the node
dataset	boolean	No	Indicates whether to return the node dataset
id	boolean	No	Indicates whether to return the node ID
mark	boolean	No	Specifies whether to return the node mark
node	boolean	No	Specifies whether to return the Node instance corresponding to the node.
properties	string[]	No	Specifies the property name list and returns the current property value of the node property name (only the general property values listed in the component document can be obtained, and "id class style" and the property values bound to events cannot be obtained)
rect	boolean	No	Indicates whether to return the node layout position (left right top bottom)
scrollOffset	boolean	No	Indicates whether to return the node's scrollLeft and scrollTop. The node must be scroll-view or viewport.
size	boolean	No	Indicates whether to return the node size (width and height)

FieldsCallback

(res: Record<string, any>) => void

Property	Type	Description
res	Record<string, any>	Information about nodes

NodeCallback

The callback function. After the SelectorQuery.exec method is executed, the node information will be returned.

(result: NodeCallbackResult) => void

Property	Type
result	NodeCallbackResult

NodeCallbackResult

Property	Type	Description
node	Record<string, any>	Node instances corresponding to nodes

ScrollOffsetCallback

The callback function. After the SelectorQuery.exec method is executed, the node information will be returned in callback.

(result: ScrollOffsetCallbackResult) => void

Property	Type
result	ScrollOffsetCallbackResult

ScrollOffsetCallbackResult

Property	Type	Description
dataset	Record<string, any>	The dataset of the node
id	string	The ID of the node
scrollLeft	number	The horizontal scroll position of the node
scrollTop	number	The vertical scroll position of the node

API Support

API	WeChat Mini-Program	H5	React Native
NodesRef.boundingClientRect	✔️	✔️
NodesRef.context	✔️
NodesRef.fields	✔️	✔️
NodesRef.node	✔️
NodesRef.scrollOffset	✔️	✔️