So erhalten Sie einen Dom-Knoten in Uniapp

Methoden für Uniapp zum Abrufen von Dom-Knoten: 1. Rufen Sie den ersten Knoten ab, der mit dem Selektor übereinstimmt, mit der Methode „let dom=query.select(selector)“. 2. Rufen Sie alle Knoten mit der Methode „letdoms=query.selectAll(selector) ab )“-Methodenknoten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Thinkpad T480-Computer.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Uni-App Get DOM Nodes

[Referenz offizielle Website: https://uniapp.dcloud.io/api/ui/nodes-info?id = selectorqueryexec】

1. So erhalten Sie die SelectorQuery-Objektinstanz:

let query=uni.createSelectorQuery();

Funktion: Gibt eine Instanz des SelectorQuery-Objekts zurück, die zum Abfragen der Informationen des DOM-Knotens verwendet wird.

Hinweise:

(1) Diese Methode muss aufgerufen werden, nachdem der Lebenszyklus bereitgestellt wurde.

(2) Die NVUE-Technologie unterstützt diese Methode nicht.

2. So erhalten Sie den DOM-Knoten:

1. Holen Sie sich den ersten Knoten, der dem Selektor entspricht:

let dom=query.select(selector)

Beide beiden oben genannten Methoden geben NodesRef-Objektinstanzen zurück , welche Instanzen verwendet werden, um Informationen über DOM-Knoten zu erhalten.

3. So erhalten Sie die Informationen zu DOM-Knoten: (Nehmen Sie Doms)

1. Rufen Sie die Informationen zur Bildlaufposition von DOM-Knoten ab:

letdoms=query.selectAll（selector）

3. Holen Sie sich die DOM-Knoten. Alle Informationen:

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

IV. Codebeispiele 1. Es gibt mehrere Knoten mit dem Namen leftItem in d477f9ce7bf77f53fbcf36bec1b69b7a zu a Im Datenbereich wurde ein Array mit dem Namen leftItemTop definiert.

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

2. Es gibt mehrere Knoten mit dem Namen rightItem in cf02b64373d56bfa6005cf61bdd2cdf0. Wie kann ich die Höhe dieser Knoten ermitteln und diese Höhen einem Knoten mit dem Namen rightItem zuweisen, der im Datenbereich definiert wurde?

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

5. Asynchrone Probleme durch Datenrendering DOM:

[Referenz offizielle Website: https://cn.vuejs.org/v2/api/#vm-nextTick]

[Empfohlene Lektüre: https://segmentfault .com/a/1190000012861862】

**Frage:**Die Variable temp in einem bestimmten Datenbereich beeinflusst die Darstellung der DOM-Struktur und es wird festgelegt, dass nach der Aktualisierung der Variablen ein weiterer Vorgang ausgeführt werden muss, bis der Die DOM-Struktur wird neu gerendert. Wie stellen diese anderen Vorgänge dann sicher, dass sie erst ausgeführt werden, nachdem die DOM-Struktur neu gerendert wurde?

Lösung: Diese Vorgänge, die ein erneutes Rendern der DOM-Struktur erfordern, müssen in der Rückruffunktion im Format this&nextTick(function(){}) geschrieben werden.

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

Nehmen wir einfach an, dass es sich bei der obigen Struktur um eine datengesteuerte Struktur handelt. Die Variable domData muss zuerst die erforderlichen Daten von der Schnittstelle abrufen und sie dann in die DOM-Struktur rendern.

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

Nachdem die Variable domData die Daten von der Schnittstelle erhalten hat, muss sie sicherstellen, dass die DOM-Struktur erfolgreich gerendert wird, bevor sie die Breite dieser Strukturen erhalten kann. Daher müssen nachfolgende Vorgänge mit this.nextTick(function(){ umschlossen werden. }) , das in die Rückruffunktion von this.nextTick(function(){}) geschrieben wird.

Der Code für das obige Beispiel lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonSo erhalten Sie einen Dom-Knoten in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!