FXML

createSelectorQuery

SelectorQuery ft.createSelectorQuery()

Returns a SelectorQuery Object instance. In a custom component or a page that contains it, you should use the this.createSelectorQuery() To replace

Return value

SelectorQuery

sample code

const query = ft.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #Upper boundary coordinates of the -id node
  res[1].scrollTop // Vertical scrolling position of display area
})

createIntersectionObserver

IntersectionObserver ft.createIntersectionObserver(Object component, Object options)
Creates and returns a IntersectionObserver Object instance. In a custom component or a page that contains it, you should use the this.createIntersectionObserver([options]) To replace
​

parameter

Object component

Custom component instance

Object options

to make a choice

attribute	type	Default values	Required	Introductions	Minimum
thresholds	Array.<number>	[0]	no	An array of values containing all thresholds.
initialRatio	number	0	no	The initial intersection ratio, which triggers a listener callback if the intersection ratio detected when called is not equal to this value and reaches a threshold
observeAll	boolean	false	no	Whether multiple target nodes are observed simultaneously (instead of one), if set to true ，observe of targetSelector Multiple nodes will be selected (Note: Selecting too many nodes at the same time will affect rendering performance)	2.0.0

Return value

IntersectionObserver

IntersectionObserver

IntersectionObserver Object that infers whether and what percentage of nodes are visible to the user

IntersectionObserver.relativeTo

IntersectionObserver IntersectionObserver.relativeTo(string selector, Object margins) Use the selector to specify a node as one of the reference ranges

parameter

string selector

Selector

Object margins

Used to extend (or contract) the boundaries of the reference node layout area

attribute	type	Default values	Required	Introductions
left	number		no	Left bound of node layout area
right	number		no	Right bound of node layout region
top	number		no	Upper Boundary of Node Layout Area
bottom	number		no	Lower boundary of node layout area

Return value

IntersectionObserver

IntersectionObserver.relativeToViewport

IntersectionObserver IntersectionObserver.relativeToViewport(Object margins) Specify the page display area as one of the reference areas

parameter

Object margins

Used to extend (or contract) the boundaries of the reference node layout area

attribute	type	Default values	Required	Introductions
left	number		no	Left bound of node layout area
right	number		no	Right bound of node layout region
top	number		no	Upper Boundary of Node Layout Area
bottom	number		no	Lower boundary of node layout area

Return value

IntersectionObserver

sample code

In the following example code, if the target node uses the selector .target-class Specify) enter the display area below 100px The callback function is triggered

Page({
  onLoad: function(){
    ft.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // Proportion of intersecting regions to the layout area of the target node
      res.intersectionRect // Intersecting region
      res.intersectionRect.left // Left boundary coordinates of intersecting region
      res.intersectionRect.top // Upper boundary coordinates of intersecting regions
      res.intersectionRect.width // Width of intersecting area
      res.intersectionRect.height // Height of intersection area
    })
  }
})

IntersectionObserver.observe

IntersectionObserver.observe(string targetSelector, IntersectionObserver.observeCallback callback) Specify the target node and start listening for changes in the intersection state

parameter

string targetSelector

Selector

function callback

A callback function that listens for intersecting state changes

parameter

Object res

attribute	type	Introductions
id	string	node ID
dataset	Record.<string, any>	Node Custom Data Properties
intersectionRatio	number	Intersecting proportion
intersectionRect	Object	Boundary of intersecting region
boundingClientRect	Object	Target boundary
relativeRect	Object	Boundary of reference area
time	number	Time Stamp for Intersection Detection

res.intersectionRect Structure

attribute	type	Introductions
left	number	Left boundary
right	number	Right boundary
top	number	Upper boundary
bottom	number	Lower boundary
width	number	width
height	number	height

res.boundingClientRect Structure

attribute	type	Introductions
left	number	Left boundary
right	number	Right boundary
top	number	Upper boundary
bottom	number	Lower boundary
width	number	width
height	number	height

res.relativeRect Structure

attribute	type	Introductions
left	number	Left boundary
right	number	Right boundary
top	number	Upper boundary
bottom	number	Lower boundary

IntersectionObserver.disconnect

IntersectionObserver.disconnect() Stop listening. The callback function will no longer trigger

MediaQueryObserver

MediaQueryObserver.disconnect

MediaQueryObserver.disconnect() Stop listening. The callback function will no longer trigger

MediaQueryObserver.observe

MediaQueryObserver.observe(Object descriptor, function callback)

Start listening to page media query Changes

parameter

Object descriptor

media query Descriptor

attribute	type	Default values	Required	Introductions
minWidth	number		yes	Minimum page width px In units)
maxWidth	number		yes	Maximum Page Width ( px In units)
width	number		yes	Page width px In units)
minHeight	number		yes	Minimum page height px In units)
maxHeight	number		yes	Maximum Page Height ( px In units)
height	number		yes	Page height ( px In units)
orientation	string		yes	Screen direction ( landscape or portrait ）

function callback

to monitor media query State change callback function

parameter

Object res

attribute	type	Introductions
matches	boolean	Does the current state of the page satisfy the specified media query

NodesRef

Object for obtaining FXML node information

NodesRef.boundingClientRect

SelectorQuery NodesRef.boundingClientRect(function callback)

Add a query request for the layout location of the node. In pixels relative to the display area. Its function is similar to HOUSE of getBoundingClientRectReturn. NodesRef Corresponding SelectorQuery

parameter

function callback

Callback function, before executing SelectorQuery.exec Method, the node information is displayed in the callback Returns in

parameter

Object res

attribute	type	Introductions
id	string	Node ID
dataset	Object	Node dataset
left	number	Left boundary coordinates of nodes
right	number	Node's right boundary coordinates
top	number	Upper boundary coordinates of nodes
bottom	number	Lower boundary coordinates of nodes
width	number	Width of node
height	number	Node height

Return value

SelectorQuery

sample code

Page({
  getRect () {
    ft.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // Node ID
      rect.dataset // DataSet for Node
      rect.left    // Left boundary coordinates of nodes
      rect.right   // Node's right boundary coordinates
      rect.top     // Upper boundary coordinates of nodes
      rect.bottom  // Lower boundary coordinates of nodes
      rect.width   // Width of node
      rect.height  // Node height
    }).exec()
  },
  getAllRects () {
    ft.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
      rects.forEach(function(rect){
        rect.id      // Node ID
        rect.dataset // DataSet for Node
        rect.left    // Left boundary coordinates of nodes
        rect.right   // Node's right boundary coordinates
        rect.top     // Upper boundary coordinates of nodes
        rect.bottom  // Lower boundary coordinates of nodes
        rect.width   // Width of node
        rect.height  // Node height
      })
    }).exec()
  }
})

NodesRef.context

SelectorQuery NodesRef.context(function callback)

Add node Context Object query request. Current support VideoContext、CanvasContext、LivePlayerContext、EditorContextand MapContext The acquisition of

parameter

function callback

回Callback function, before executing SelectorQuery.exec Method, returns node information

parameter

Object res

attribute	type	Introductions
context	Object	Node corresponding Context object

Return value

SelectorQuery

sample code

Page({
  getContext () {
    ft.createSelectorQuery().select('.the-video-class').context(function(res){
      console.log(res.context) // Node corresponding Context Object. For example: the selected node is <video> Component, this is where we return VideoContext object
    }).exec()
  }
})

NodesRef.fields

SelectorQuery NodesRef.fields(Object fields, function callback)

Gets information about the node. The fields to fetch are specified in fields. The return value is nodesRef Corresponding selectorQuery

parameter

Object fields

attribute	type	Default values	Required	Introductions	Minimum
id	boolean	false	no	Returns a node id
dataset	boolean	false	no	Returns a node dataset
mark	boolean	false	no	Returns a node mark
rect	boolean	false	no	Returns the node layout locationleft right top bottom）
size	boolean	false	no	Returns the node sizewidth height）
scrollOffset	boolean	false	no	no Whether to return a node's scrollLeft scrollTopNode must be scroll-view or viewport
properties	Array.<string>	[]	no	Specifies a list of property names that returns the current property value of the node corresponding to the property name. class style And event - bound property values are not available
computedStyle	Array.<string>	]	no	Specifies a list of style names and returns the current value of the node corresponding to the style name	[2.1.0
context	boolean	false	no	Returns the corresponding node Context object	2.4.2
node	boolean	false	no	Returns the corresponding node Node Example	2.7.0

function callback

callback

parameter

Object res

Node related information

Return value

SelectorQuery

Be careful

computedStyle Has a higher priority than Size, when at the same time computedStyle Lee specified width/height And passed in size: True, returns first computedStyle Acquired width/height

sample code

Page({
  getFields () {
    ft.createSelectorQuery().select('#the-id').fields({
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY'],
      computedStyle: ['margin', 'backgroundColor'],
      context: true,
    }, function (res) {
      res.dataset    // DataSet for Node
      res.width      // Width of node
      res.height     // Node height
      res.scrollLeft // Horizontal scrolling position of node
      res.scrollTop  // Vertical scroll position of node
      res.scrollX    // node scroll-x Property's current value
      res.scrollY    // node scroll-y Property's current value
      // Returns the specified style name to be returned here
      res.margin
      res.backgroundColor
      res.context    // Node corresponding Context object
    }).exec()
  }
})

NodesRef.scrollOffset

SelectorQuery NodesRef.scrollOffset(function callback)

Adds a scrolling position query request for the node. In pixels. Nodes must be scroll-view or viewportTo return NodesRef Corresponding SelectorQuery

parameter

function callback

Callback function, before executing SelectorQuery.exec Method, the node information is displayed in the callback Returns in

parameter

Object res

attribute	type	Introductions
id	string	Node ID
dataset	Object	Node dataset
scrollLeft	number	Horizontal scrolling position of node
scrollTop	number	Vertical scroll position of node

Return value

SelectorQuery

sample code

Page({
  getScrollOffset () {
    ft.createSelectorQuery().selectViewport().scrollOffset(function(res){
      res.id      // Node ID
      res.dataset // DataSet for Node
      res.scrollLeft // Horizontal scrolling position of node
      res.scrollTop  // Vertical scroll position of node
    }).exec()
  }
})

NodesRef.node

SelectorQuery NodesRef.node(function callback)

Obtain Node Node instance

parameter

function callback

Callback function, before executing SelectorQuery.exec Method, returns node information

parameter

Object res

attribute	type	Introductions
node	Object	Node corresponding Node Example

Return value

SelectorQuery

sample code

Page({
  getNode() {
    ft.createSelectorQuery().select('.canvas').node(function(res){
      console.log(res.node) // Node corresponding Canvas Instance
    }).exec()
  }
})

SelectorQuery

Object for querying node information

SelectorQuery.exec

NodesRef SelectorQuery.exec(function callback)

Execute all requests. The request results form an array in the order requested and are returned in the first parameter of callback

parameter

function callback

callback

Return value

NodesRef

SelectorQuery.in

SelectorQuery SelectorQuery.in(Component component)

Change the selection of a selector to a custom component component Inside. Initially, the selector selects only page-scoped nodes, not nodes in any custom component

parameter

Component component

Custom component instance

Return value

SelectorQuery

sample code

Component({
  queryMultipleNodes (){
    const query = ft.createSelectorQuery().in(this)
    query.select('#the-id').boundingClientRect(function(res){
      res.top // Inside this component #the-id Upper boundary coordinates of nodes
    }).exec()
  }
})

SelectorQuery.select

NodesRef SelectorQuery.select(string selector)

Select the first match selector under the current page selector Node of the. Returns a NodesRef Object that can be used to get node information

parameter

string selector

Selector

Return value

NodesRef

selector grammar

Selectors are similar to CSS But only the following syntax is supported.

• ID selector:#the-id
• Class selector (you can specify more than one in a row):. a-class.another-class
• Child element selector:. The-parent > .the-child
• Descendant selector:. The-ancester .the-descendant
• Descendant selector across custom components:. The-ancester >>> .the-descendant
• Union of multiple selectors:#a-node, .some-other-nodes

SelectorQuery.selectAll

NodesRef SelectorQuery.selectAll(string selector)

Select the match selector under the current page selector All nodes of the

parameter

string selector

Selector

Return value

NodesRef

selector grammar

Selectors are similar to CSS But only the following syntax is supported.

• ID selector:#the-id
• Class selector (you can specify more than one in a row):. a-class.another-class
• Child element selector:. The-parent > .the-child
• Descendant selector:. The-ancester .the-descendant
• Descendant selector across custom components:. The-ancester >>> .the-descendant
• Union of multiple selectors:#a-node, .some-other-nodes

SelectorQuery.selectViewport

NodesRef SelectorQuery.selectViewport()

Select the display area. Can be used to obtain display area size, scroll position and other information.

Return value

NodesRef