title: NodesRef
sidebar_label: 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 |
✔️ |
✔️ |
|