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 d477f9ce7bf77f53fbcf36bec1b69b7a Pour les nœuds dont le nom de classe est leftItem, 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.

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

2. Exemple 2 : Il existe plusieurs nœuds nommés rightItem dans cf02b64373d56bfa6005cf61bdd2cdf0. Comment obtenir la hauteur de ces nœuds et attribuer ces hauteurs à un nœud qui a été défini dans la zone de données ? Un tableau nommé rightItem.

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

5. Problèmes asynchrones causés par le rendu des données DOM :

[Référence site officiel : https://cn.vuejs.org/v2/api/#vm-nextTick]

[Lecture recommandée : https://segmentfault.com/a/1190000012861862]

**Problème :**La variable temp dans une certaine zone de données affecte le rendu de la structure DOM, et c'est spécifié qu'après la mise à jour de la variable, une autre opération doit être effectuée jusqu'à ce que la structure DOM soit restituée. Comment ces autres opérations peuvent-elles garantir que ces autres opérations ne se produisent qu'après le nouveau rendu de la structure DOM ?

Solution : Ces opérations qui nécessitent un nouveau rendu de la structure DOM doivent être écrites dans la fonction de rappel au format this&nextTick(function(){}).

<block v-for="(item,index) in domData">
<view class="domItem">{{item.title}}</view>
</block>

Disons simplement que la structure ci-dessus est une structure pilotée par les données domData. La variable domData doit d'abord obtenir les données nécessaires de l'interface, puis les restituer dans la structure DOM.

data(){
return{
domData:[], //用于储存从接口中获取的DOM数据
domItemWidth:[] //用于储存获取的DOM结构的宽度
}
}

Lorsque la variable domData récupère les données de l'interface, elle doit également s'assurer que la structure DOM est restituée avec succès avant que la largeur de ces structures puisse être obtenue. Par conséquent, les opérations ultérieures doivent utiliser la fonction this.nextTick(. (){ }), qui est écrit dans la fonction de rappel de this.nextTick(function(){}).

Le code de l'exemple ci-dessus est le suivant :

uni.request({
url:"http://localhost:8080/......",
data:{.....},
success:res=>{
this.domData=res.data;
this.nextTick(()=>{//该格式保证了domData已经得到接口数据并成功渲染DOM结构
uni.createSelectorQuery().selectAll(".domItem").fields({
size:true
},res=>{
this.domItemWidth=res.map(item=>item.width)
}).exec(()=>{
console.log(this.domItemWidth)
})
})
}
})

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!