Skip to main content
Version: Next

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
PropertyTypeDescription
callbackBoundingClientRectCallbackThe 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

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
callbackContextCallbackThe 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

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
fieldsFields
callbackFieldsCallbackCallback 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

APIWeChat Mini-ProgramH5React Native
NodesRef.fields✔️✔️

node

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

Reference

(callback?: NodeCallback) => SelectorQuery
PropertyTypeDescription
callbackNodeCallbackThe 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

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
callbackScrollOffsetCallbackThe 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

APIWeChat Mini-ProgramH5React 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
PropertyType
resultBoundingClientRectCallbackResult

BoundingClientRectCallbackResult

PropertyTypeDescription
datasetRecord<string, any>The dataset of the node
idstringThe ID of the node
bottomnumberThe lower boundary coordinate of the node
leftnumberThe left boundary coordinate of the node
rightnumberThe right boundary coordinate of the node
topnumberThe upper boundary coordinate of the node
heightnumberThe height of the node
widthnumberThe width of the node

ContextCallback

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

(result: ContextCallbackResult) => void
PropertyType
resultContextCallbackResult

ContextCallbackResult

PropertyTypeDescription
contextRecord<string, any>The Context object of the node

Fields

PropertyTypeRequiredDescription
computedStylestring[]NoSpecifies the style name list and returns the current value of the node style name
contextbooleanNoIndicates whether to return the Context object of the node
datasetbooleanNoIndicates whether to return the node dataset
idbooleanNoIndicates whether to return the node ID
markbooleanNoSpecifies whether to return the node mark
nodebooleanNoSpecifies whether to return the Node instance corresponding to the node.
propertiesstring[]NoSpecifies 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)
rectbooleanNoIndicates whether to return the node layout position (left right top bottom)
scrollOffsetbooleanNoIndicates whether to return the node's scrollLeft and scrollTop. The node must be scroll-view or viewport.
sizebooleanNoIndicates whether to return the node size (width and height)

FieldsCallback

(res: Record<string, any>) => void
PropertyTypeDescription
resRecord<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
PropertyType
resultNodeCallbackResult

NodeCallbackResult

PropertyTypeDescription
nodeRecord<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
PropertyType
resultScrollOffsetCallbackResult

ScrollOffsetCallbackResult

PropertyTypeDescription
datasetRecord<string, any>The dataset of the node
idstringThe ID of the node
scrollLeftnumberThe horizontal scroll position of the node
scrollTopnumberThe vertical scroll position of the node

API Support

APIWeChat Mini-ProgramH5React Native
NodesRef.boundingClientRect✔️✔️
NodesRef.context✔️
NodesRef.fields✔️✔️
NodesRef.node✔️
NodesRef.scrollOffset✔️✔️