Maison > interface Web > uni-app > le corps du texte

Comment obtenir le nœud dom dans Uni-App

coldplay.xixi
Libérer: 2023-01-13 00:44:02
original
13155 Les gens l'ont consulté

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.].

Comment obtenir le nœud dom dans Uni-App

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)
Copier après la connexion

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

letdoms=query.selectAll(selector)
Copier après la connexion

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(){
//上述布局位置信息获取成功后执行的回调函数
})
Copier après la connexion
<. 🎜>2. Obtenez les informations sur la position de défilement des nœuds DOM :

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

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

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)
})
Copier après la connexion
<template>Recommandations d'apprentissage gratuites associées. :

programmation php<template:> (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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!