NodesRef

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

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

context

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

Reference

(callback?: ContextCallback) => SelectorQuery

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

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

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

node

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

Reference

(callback?: NodeCallback) => SelectorQuery

Sample Code

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

API Support

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

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

Parameters

BoundingClientRectCallback

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

(result: BoundingClientRectCallbackResult) => void

BoundingClientRectCallbackResult

ContextCallback

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

(result: ContextCallbackResult) => void

ContextCallbackResult

Fields

FieldsCallback

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

NodeCallback

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

(result: NodeCallbackResult) => void

NodeCallbackResult

ScrollOffsetCallback

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

(result: ScrollOffsetCallbackResult) => void

ScrollOffsetCallbackResult

API Support