FXML
# createSelectorQuery
SelectorQuery ft.createSelectorQuery()
Returns an instance of the SelectorQuery object. In custom components or pages that contain custom components, this.createSelectorQuery() should be used instead.
Return Value
SelectorQuery
Sample Code
# createIntersectionObserver
IntersectionObserver ft.createIntersectionObserver(Object component, Object options)
Creates and returns an instance of the IntersectionObserver object. In custom components or pages that contain custom components, this.createIntersectionObserver([options]) should be used instead.
Parameters
Object component
Custom Component Instance
Object options
Options
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| thresholds | Array.<number> | [0] | No | an array of numeric values containing all thresholds. | |
| initialRatio | number | 0 | No | The initial intersection ratio, if the intersection ratio detected at the time of the call is not equal to this value and reaches the threshold, the callback function of the Listener is triggered once. | |
| observeAll | boolean | false | No | If multiple target nodes are observed at the same time (instead of one), if set to true, the targetSelector for observe will select multiple nodes (Note: selecting too many nodes at the same time will affect rendering performance) | 2.0.0 |
Return Value
IntersectionObserver
# IntersectionObserver
An IntersectionObserver object that infers whether certain nodes can be seen by the user and what percentage of them can be seen by the user.
# IntersectionObserver.relativeTo
IntersectionObserver IntersectionObserver.relativeTo(string selector, Object margins) Use selectors to specify a node as one of the reference regions.
Parameters
string selector
selector
Object margins
The boundary used to expand (or contract) the area of the reference node layout
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| left | number | No | The left border of the node layout area | |
| right | number | No | The right boundary of the node layout area | |
| top | number | No | The upper boundary of the node layout area | |
| bottom | number | No | The lower boundary of the node layout area |
Return Value
IntersectionObserver
# IntersectionObserver.relativeToViewport
IntersectionObserver IntersectionObserver.relativeToViewport(Object margins) Specifies the page display area as one of the reference areas
Parameters
Object margins
The boundary used to expand (or contract) the area of the reference node layout
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| left | number | No | The left border of the node layout area | |
| right | number | No | The right boundary of the node layout area | |
| top | number | No | The upper boundary of the node layout area | |
| bottom | number | No | The lower boundary of the node layout area |
Return Value
IntersectionObserver
Sample Code
In the following sample code, a callback function is triggered if the target node (specified with the selector .target-class) enters 100px below the display area.
# IntersectionObserver.observe
IntersectionObserver.observe(string targetSelector, IntersectionObserver.observeCallback callback) Specify the target node and start listening for intersection state changes
Parameters
string targetSelector
selector
function callback
A callback function that listens for changes in the intersection state
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| id | string | The node ID |
| dataset | Record.<string, any> | node custom data attribute |
| intersectionRatio | number | Intersecting scale |
| intersectionRect | Object | The boundaries of the intersecting areas |
| boundingClientRect | Object | Target boundary |
| relativeRect | Object | The boundary of the reference area is |
| time | number | The timestamp at intersection detection |
Structure of res.intersectionRect
| Properties | Type | Description |
|---|---|---|
| left | number | Left Border |
| right | number | Right Border |
| top | number | Upper boundary |
| bottom | number | The lower boundary |
| width | number | Width |
| height | number | Height |
res.bounding Structure ofClientRect
| Properties | Type | Description |
|---|---|---|
| left | number | Left Border |
| right | number | Right Border |
| top | number | Upper boundary |
| bottom | number | The lower boundary |
| width | number | Width |
| height | number | Height |
Structure of res.relativeRect
| Properties | Type | Description |
|---|---|---|
| left | number | Left Border |
| right | number | Right Border |
| top | number | Upper boundary |
| bottom | number | The lower boundary |
# IntersectionObserver.disconnect
IntersectionObserver.disconnect() Stops listening. The callback function will no longer fire
# MediaQueryObserver.disconnect
MediaQueryObserver.disconnect() Stops listening. The callback function will no longer fire
# MediaQueryObserver.observe
MediaQueryObserver.observe(Object descriptor, function callback)
Start listening for page media query changes
Parameters
Object descriptor
The media query descriptor
| Properties | Type | The default value is | Required | Description |
|---|---|---|---|---|
| minWidth | number | Yes | The minimum width of the page (in px) | |
| maxWidth | number | Yes | The maximum width of the page (in px) | |
| width | number | Yes | The page width (in px) | |
| minHeight | number | Yes | The minimum height of the page (in px) | |
| maxHeight | number | Yes | The maximum height of the page (in px) | |
| height | number | Yes | The page height (in px) | |
| orientation | string | Yes | The screen orientation ('landscape' or 'portrait' ) |
function callback
A callback function that listens for changes in the state of the media query
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| matches | boolean | Whether the current state of the page satisfies the specified media query |
# NodesRef
An object used to get FXML node information
# NodesRef.boundingClientRect
SelectorQuery NodesRef.boundingClientRect(function callback)
Adds a query request for the layout location of the node. Relative to the display area, in pixels. It functions like the DOM's 'getBoundingClientRect'. Returns 'SelectorQuery' corresponding to 'NodesRef'.
Parameters
function callback
The callback function, after executing the 'SelectorQuery.exec' method, the node information is returned in 'callback'.
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| id | string | The ID of the node |
| dataset | Object | The dataset |
| left | number | The left boundary coordinate of the node |
| right | number | The right boundary coordinate of the node |
| top | number | The upper boundary coordinates of the node |
| bottom | number | The lower boundary coordinates of the node |
| width | number | The width of the node |
| height | number | The height of the node |
Return Value
SelectorQuery
Sample Code
# NodesRef.context
SelectorQuery NodesRef.context(function callback)
Adds a context object query request for the node. Currently supports videoContext, CanvasContext, LivePlayerContext, EditorContext, and MapContext.
Parameters
function callback
The callback function returns node information after executing the 'SelectorQuery.exec' method.
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| context | Object | The context object of the node corresponds to the |
Return Value
SelectorQuery
Sample Code
# NodesRef.fields
SelectorQuery NodesRef.fields(Object fields, function callback)
Gets information about the node. The fields that need to be obtained are specified in fields. The return value is 'selectorQuery' corresponding to 'nodesRef'
Parameters
Object fields
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| id | boolean | false | No | Whether to return node id | |
| dataset | boolean | false | No | Whether to return node dataset | |
| mark | boolean | false | No | Whether to return node mark | |
| rect | boolean | false | No | Whether to return the node layout position ('left' 'right' 'top' 'bottom') | |
| size | boolean | false | No | Whether to return the node size ('width' 'height') | |
| scrollOffset | boolean | false | No | No To return the 'scrollLeft' 'scrollTop' of the node, the node must be 'scroll-view' or 'viewport' | |
| properties | Array.<string> | [] | No | Specifies a list of property names, returns the current property values for the corresponding property names of the node (only the general property values of the annotations in the component document can be obtained, and the id class style and event binding property values are not available) | |
| computedStyle | Array.<string> | ] | No | Specifies a list of style names, returning the current value of the corresponding style name of the node | [2.1.0 |
| context | boolean | false | No | Whether to return the Context object for the node | 2.4.2 |
| node | boolean | false | No | Whether to return the Node instance corresponding to the node | 2.7.0 |
function callback
Callback function
Parameters
Object res
Information about the node
Return Value
SelectorQuery
NOTE
ComputedStyle takes precedence over size, and when both width/height and size:true are passed in the computedStyle, the width/height obtained by computedStyle is returned first.
Sample Code
# NodesRef.scrollOffset
SelectorQuery NodesRef.scrollOffset(function callback)
Adds a scroll position query request for the node. In pixels. The node must be 'scroll-view' or 'viewport', returning 'SelectorQuery' corresponding to 'NodesRef'.
Parameters
function callback
The callback function, after executing the 'SelectorQuery.exec' method, the node information is returned in 'callback'.
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| id | string | The ID of the node |
| dataset | Object | The dataset |
| scrollLeft | number | The horizontal scroll position of the node |
| scrollTop | number | The vertical scroll position of the node |
Return Value
SelectorQuery
Sample Code
# NodesRef.node
SelectorQuery NodesRef.node(function callback)
Gets the Node node instance.
Parameters
function callback
A callback function that returns node information after executing the SelectorQuery.exec method.
Parameters
Object res
| Properties | Type | Description |
|---|---|---|
| node | Object | The Node instance corresponding to the node |
Return Value
SelectorQuery
Sample Code
# SelectorQuery
An object that queries node information
# SelectorQuery.exec
NodesRef SelectorQuery.exec(function callback)
Execute all requests. The result of the request forms an array in the order of the request and is returned in the first argument of the callback.
Parameters
function callback
Callback function
Return Value
NodesRef
# SelectorQuery.in
SelectorQuery SelectorQuery.in(Component component)
Change the selection range of the selector to within the custom component 'component'. (Initially, the selector selects only the nodes in the page range, not any of the custom components.)
Parameters
Component component
Custom component instances
Return Value
SelectorQuery
Sample Code
# SelectorQuery.select
NodesRef SelectorQuery.select(string selector)
Under the current page, select the node that matches the selector 'selector'. Returns an instance of the 'NodesRef' object that can be used to get node information.
Parameters
string selector
selector
Return Value
NodesRef
selector syntax
Selector is similar to CSS selectors, but only the following syntax is supported.
- ID Selector: #the-id
- Class selector (multiple can be specified consecutively): .a-class.another-class
- Child element selector: .the-parent > .the-child
- Descendant selector: .the-ancestor .the-descendant
- Descendant selector across custom components: .the-ancestor >>> .the-descendant
- Union of multiple selectors: #a-node, .some-other-nodes
# SelectorQuery.selectAll
NodesRef SelectorQuery.selectAll(string selector)
Under the current page, select all nodes that match the selector of the selector.
Parameters
string selector
selector
Return Value
NodesRef
selector syntax
Selector is similar to CSS selectors, but only the following syntax is supported.
- ID Selector: #the-id
- Class selector (multiple can be specified consecutively): .a-class.another-class
- Child element selector: .the-parent > .the-child
- Descendant selector: .the-ancestor .the-descendant
- Descendant selector across custom components: .the-ancestor >>> .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 information such as the size of the display area, scroll position, and so on.
Return Value
NodesRef