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
rect.dataset
rect.left
rect.right
rect.top
rect.bottom
rect.width
rect.height
}).exec()
Example 2
Taro.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
rects.forEach(function(rect){
rect.id
rect.dataset
rect.left
rect.right
rect.top
rect.bottom
rect.width
rect.height
})
}).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)
}).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
res.width
res.height
res.scrollLeft
res.scrollTop
res.scrollX
res.scrollY
res.margin
res.backgroundColor
res.context
}).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 | ✔️ | | |
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
res.dataset
res.scrollLeft
res.scrollTop
}).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 |
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 |
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 | ✔️ | ✔️ | |