May 19, 2021 WeChat Mini Program Development Document
3. selectorQuery.select(selector)
4. selectorQuery.selectAll(selector)
5. selectorQuery.selectViewport()
6. nodesRef.boundingClientRect([callback])
7. nodesRef.scrollOffset([callback])
Base library 1.4.0 starts to support, and low versions need to be compatible
Returns an instance of the SelectorQuery object.
You can select nodes on
select
methods such as select, and use methods such as
boundingClientRect
select the information that needs to be queried.
Example code:
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})
}
})
A list of methods for selectorQuery objects:
Method | Parameters | Description |
---|---|---|
select | selector | Refer to the details below |
selectAll | selector | Refer to the details below |
selectViewport | Refer to the details below | |
Exec | [callback] | Refer to the details below |
Select the node of the first matching
selector
page and
NodesRef
object that can be used to get node information.
selector
to the CSS selector, but only supports the following syntax.
#the-id
.a-class.another-class
.the-parent > #the-child.a-class
#a-node, .some-other-nodes
Select the node that matches
selector
current page and return an
NodesRef
object.
Unlike
selectorQuery.selectNode(selector)
the nodes of all matching selectors.
Select the display area, which you can use to get information such as the size of the display area, the scroll location, and so
NodesRef
object.
Add a query request for the layout location of the node, in pixels relative to the display area. I t functions like DOM's getBoundingClientRect. The return value is the factorQuery for the nodesRef.
In the node information returned, the location of each node is
left
in the
right
top
bottom
width
height
fields.
If a callback function is provided, node information is returned in callback after the selectQuery exec method is executed.
Example code:
Page({
getRect: function(){
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()
},
getAllRects: function(){
wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
rects.forEach(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
})
}).exec()
}
})
Add a scrolling location query request for nodes, in pixels. T
he node must
scroll-view
or viewport.
The return value is the factorQuery for the nodesRef.
In the node information returned, the scroll position of each node is
scrollLeft
scrollHeight
fields.
If a callback function is provided, node information is returned in callback after the selectQuery exec method is executed.
Example code:
Page({
getScrollOffset: function(){
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
res.id // 节点的ID
res.dataset // 节点的dataset
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
}).exec()
}
})
Gets information about the node, and the fields you need to get are
fields
in fields. T
he return value is the factorQuery for the nodesRef.
Fields that you can specify to get include:
The field name | The default | Description |
---|---|---|
Id | Whether |
Whether to return node
id
|
dataset | Whether |
Whether to return the
dataset
|
rect | Whether |
Whether to return the node layout location
left
right
top
bottom
)
|
size | Whether |
Whether to return node size
width
height
|
scrollOffset | Whether |
Whether to return the
scrollLeft
scrollTop
the
scroll-view
or viewport
|
properties |
[]
|
Specifies a list of property names that return the node's current property value for the property name (only general property values labeled in the component document are
id
class
style
and event binding are not available)
|
Example code:
Page({
getFields: function(){
wx.createSelectorQuery().select('#the-id').fields({
dataset: true,
size: true,
scrollOffset: true,
properties: ['scrollX', 'scrollY']
}, function(res){
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-x 属性的当前值
}).exec()
}
})
All requests are executed, and the result of the request is an array in the order of the requests, returned in the first argument of callback.