Comment obtenir le nœud dom dans uniapp

Méthode d'Uniapp pour obtenir des nœuds dom : 1. Obtenez le premier nœud correspondant au sélecteur via la méthode "let dom=query.select(selector)" ; 2. Utilisez "letdoms=query.selectAll(selector)" ; " méthode pour obtenir tous les nœuds.

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, ordinateur thinkpad t480.

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

uni-app obtient le nœud DOM

[Référence site officiel : https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec]

1 Comment obtenir l'instance de l'objet SelectorQuery :

let query=uni.createSelectorQuery();

Fonction : Renvoie un Instance d'objet SelectorQuery, cette instance est utilisée pour interroger les informations des nœuds DOM.

Remarques :

(1) Cette méthode doit être appelée une fois le cycle de vie monté.

(2) La technologie nvue ne prend pas en charge cette méthode.

2. Comment obtenir le nœud DOM :

1. Obtenez le premier nœud qui correspond au sélecteur :

let dom=query.select(selector)

2.

letdoms=query.selectAll（selector）

Les deux méthodes ci-dessus renvoient une instance d'objet NodesRef, qui est utilisée pour obtenir des informations sur le nœud DOM.

3. Comment obtenir les informations des nœuds DOM : (prenez 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 de position de disposition des nœuds DOM Faites défiler les informations de position :

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(){
//上述节点信息获取成功后执行的回调函数
})

4 Exemples de code

1. Il existe plusieurs dans