my.createIntersectionObserver
Create and return an IntersectionObserver object instance. You need to run my.createIntersectionObserver()
after page.onReady
.
Version requirement: Base library V1.11.0 or later versions. For earlier versions, you are suggested to perform Compatibility processing.
Parameters
The input parameters are of Object type and have the following attributes:
Attribute | Type | Default value | Description |
---|---|---|---|
thresholds | Array<Number> |
[0] | A numeric array containing all thresholds. |
initialRatio | Number | 0 | The initial intersection ratio. If the intersection ratio detected during the operation is not equal to this value and reaches the threshold, the callback function of the listener will be triggered. |
selectAll | Boolean | false | Whether to monitor multiple target nodes (rather than one) at the same time. If this parameter is set to true, the monitoring targetSelector selects multiple nodes. Note: When you select too many nodes at the same time, this will affect rendering performance. |
Return value
IntersectionObserver
Sample code
<!-- .axml -->
<view class="logo" style='width: 200px;height: 200px;background-color:blue'>11</view>
Page({
onReady() {
my.createIntersectionObserver().relativeToViewport({top: 100, bottom: 100}).observe('.logo', (res) => {
console.log(res, 'intersectionObserver');
console.log(res.intersectionRatio); // The ratio of the intersection area to the layout area of the target node.
console.log(res.intersectionRect); // The intersection area.
console.log(res.relativeRect); // The boundaries of the reference area.
console.log(res.boundingClientRect); // The target boundaries.
console.log(res.time); // The timestamp.
console.log(res.id);
});
}
})
IntersectionObserver
Infers whether certain nodes can be seen by the user and how many nodes can be seen by the user.
IntersectionObserver.disconnect
Stops the monitoring. The callback function will not be triggered.
IntersectionObserver.observe
Specifies the target node and starts monitoring intersection status changes.
Parameters
The format of input parameters is: (String targetSelector, function callback)
- String targetSelector indicates the selector.
- Function callback indicates the callback function for monitoring intersection status changes.
Callback parameters
Object res attributes
Attribute | Type | Description |
---|---|---|
intersectionRatio | Number | The intersection ratio. |
intersectionRect | Object | The boundaries of the intersection area. |
boundingClientRect | Object | The target boundaries. |
relativeRect | Object | The boundaries of the reference area. |
time | Number | The timestamp of intersection detection. |
res.intersectionRect attributes
Attribute | Type | Description |
---|---|---|
left | Number | The left boundary. |
right | Number | The right boundary. |
top | Number | The upper boundary. |
bottom | Number | The lower boundary. |
res.boundingClientRect attributes
Attribute | Type | Description |
---|---|---|
left | Number | The left boundary. |
right | Number | The right boundary. |
top | Number | The upper boundary. |
bottom | Number | The lower boundary. |
res.relativeRect attributes
Attribute | Type | Description |
---|---|---|
left | Number | The left boundary. |
right | Number | The right boundary. |
top | Number | The upper boundary. |
bottom | Number | The lower boundary. |
IntersectionObserver.relativeTo
Uses the selector to specify a node as a reference area.
Parameters
The format of input parameters is: (String selector,Object margins)
- String selector indicates the selector.
- Object margins is used to expand or shrink the boundaries of the layout area of the reference node with the following attributes:
Attribute | Type | Required | Description |
---|---|---|---|
left | Number | No | The left boundary 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. |
IntersectionObserver.relativeToViewport
Specifies a page display area as a reference area.
Parameters
The input parameter is “Object margins”, which is used to expand or shrink the boundaries of the layout area of the reference node with the following attributes:
Attribute | Type | Required | Description |
---|---|---|---|
left | Number | No | The left boundary 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. |
my.createSelectorQuery
- This interface is supported since basic library version 1.4.0.
- This interface is only supported in mPaaS 10.1.32 and later versions.
Obtains the node query object SelectorQuery
.
Parameters
Parameter | Type | Description |
---|---|---|
params | Object | You can specify the page attribute, which defaults to the current page. |
Sample code
<!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
<view class="page">
<view class="page-description">The node query API</view>
<view class="page-section">
<view className="all">Node all1</view>
<view className="all">Node all2</view>
<view id="one">Node one</view>
<view id="scroll" style="height:200px;overflow: auto">
<view style="height:400px">The independent scrolling area</view>
</view>
<button type="primary" onTap="createSelectorQuery">Node query</button>
</view>
</view>
// API-DEMO page/API/create-selector-query/create-selector-query.js
Page({
createSelectorQuery() {
my.createSelectorQuery()
.select('#non-exists').boundingClientRect()
.select('#one').boundingClientRect()
.selectAll('.all').boundingClientRect()
.select('#scroll').scrollOffset()
.selectViewport().boundingClientRect()
.selectViewport().scrollOffset().exec((ret) => {
console.log(ret);
my.alert({
content: JSON.stringify(ret, null, 2),
});
})
},
});
ret structure
[
null,
{
"x": 1,
"y": 2,
"width": 1367,
"height": 18,
"top": 2,
"right": 1368,
"bottom": 20,
"left": 1
},
[
{
"x": 1,
"y": -34,
"width": 1367,
"height": 18,
"top": -34,
"right": 1368,
"bottom": -16,
"left": 1
},
{
"x": 1,
"y": -16,
"width": 1367,
"height": 18,
"top": -16,
"right": 1368,
"bottom": 2,
"left": 1
}
],
{
"scrollTop": 0,
"scrollLeft": 0
},
{
"width": 1384,
"height": 360
},
{
"scrollTop": 35,
"scrollLeft": 0
}
]
SelectorQuery
The node query object class, which includes the following methods:
selectorQuery.select(selector)
Selects the first node that matches the selector. The selector supports the ID and class selectors.
selectorQuery.selectAll(selector)
Selects all nodes that match the selector. The selector supports the ID and class selectors.
selectorQuery.selectViewport()
Selects the window object.
selectorQuery.boundingClientRect()
Places the position information of the currently selected node into the query result. This function is similar to getBoundingClientRect
of dom, and the returned objects are width, height, left, top, bottom, and right. If the current node is a window object, only width and height are returned.
selectorQuery.scrollOffset()
Places the scrolling information of the currently selected node into the query result. The returned objects are scrollTop and scrollLeft.
selectorQuery.exec(callback)
Places the query result into the callback
for callback. The query result is an array, and each item in the array is the result of a query. If the item is a node list, the result of a single query is also an array. Note that you must perform the Page onReady
operation before exec
.