How to get dom node in uni-app

Uniapp’s method of getting dom nodes: 1. Get the first node that matches the selector, the code is [let dom=query.select(selector)]; 2. Get all the nodes that match the selector, the code It is [letdoms=query.selectAll(selec.].

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer, the The method is applicable to all brands of computers.

Recommended (free): uni-app development tutorial

Uniapp’s method of obtaining DOM nodes:

1. How to obtain DOM nodes:

1. Get the first matching selector Nodes:

let dom=query.select(selector)

2. Get all nodes matching the selector:

letdoms=query.selectAll（selector）

Both of the above two methods return NodesRef object instances, which are used to obtain DOM node information.

2. How to get the information of DOM nodes: (take doms as an example)

1. Get the layout position information of DOM nodes:

doms.boundingClienRect(function(res){
//res:{left,top,right,bottom,width,height}
}).exec(function(){
//上述布局位置信息获取成功后执行的回调函数
})

2. Get Scroll position information of DOM nodes:

doms.scrollOffset(function(){
//res:{scrollLeft,scrollTop}
}).exec(function(){
//上述滚动位置信息获取成功后执行的回调函数
})

3. Get all information of DOM nodes:

doms.fields({
rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
size:true,  //是否返回节点尺寸信息{width，height}
scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
},function(res){
//res 可以返回第一个参数对象中指定为true的相关信息
}).exec(function(){
//上述节点信息获取成功后执行的回调函数
})

3. Code examples

1, Example 1 ： <template> There are multiple nodes named leftItem in the class. How to get the distance of these nodes from the top and assign these distances to an array named leftItemTop that has been defined in the data area. .

uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.log(this.leftItemTop)
})

2. Example 2: There are multiple nodes named rightItem in <template:>. How to get the height of these nodes and assign these heights to a An array named rightItem that has been defined in the data area.

uni.createSelectorQuery().selectAll(".rightItem").fields({
size:true
},res=>{
this.rightItemHeight=res.map(item=>{item.height})
}).exec(()=>{
console.log(this.rightItemHeight)
})

Related free learning recommendations: php programming (video)

The above is the detailed content of How to get dom node in uni-app. For more information, please follow other related articles on the PHP Chinese website!