Comment obtenir le nœud dom dans Uni-App

Méthode d'Uniapp pour obtenir les nœuds dom : 1. Obtenez le premier nœud qui correspond au sélecteur, le code est [let dom=query.select(selector)] ; 2. Obtenez tous les nœuds qui correspondent au sélecteur, le code Pour [letdoms=query.selectAll(selec.].

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, Dell G3 ordinateur, la méthode est applicable à toutes les marques d'ordinateurs

Recommandé (gratuit) : tutoriel de développement uni-app 

Comment uniapp obtient le nœud DOM :

1. Comment obtenir le nœud DOM :

1. Obtenez les premiers nœuds du sélecteur correspondant :

let dom=query.select(selector)

2. Obtenez tous les nœuds correspondant au sélecteur :

letdoms=query.selectAll（selector）

Les deux méthodes ci-dessus renvoient des instances d'objet NodesRef, qui sont utilisées pour obtenir les informations des nœuds DOM. .

2. Comment obtenir les informations des nœuds DOM : (prenons les doms comme exemple)

1. Obtenez les informations de position de disposition des nœuds DOM :

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

<.>2. Obtenez les informations sur la position de défilement des nœuds DOM :

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

3. Obtenez toutes les informations sur les nœuds DOM :

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

3. Exemples de code

1. Exemple 1 : Il y a plusieurs nœuds nommés leftItem dans

Comment obtenir la distance depuis le haut de ces nœuds et attribuer ces distances à un tableau nommé leftItemTop qui a été défini dans la zone de données. 2 : Il existe plusieurs nœuds nommés rightItem dans

Comment obtenir la hauteur de ces nœuds et attribuer ces hauteurs à un tableau nommé rightItem qui a été défini dans la zone de données

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

d477f9ce7bf77f53fbcf36bec1b69b7a

Recommandations d'apprentissage gratuites associées. :

programmation phpcf02b64373d56bfa6005cf61bdd2cdf0 (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!