So ermitteln Sie die Höhe eines Elements in Uniapp

Bei der Entwicklung von Projekten mit uniapp müssen wir häufig die Höhe von Elementen ermitteln, um entsprechende Vorgänge und Layouts durchzuführen, z. B. die dynamische Berechnung der Höhe von Listenelementen, das Festlegen der Mindesthöhe von Komponenten usw. Wie erhalte ich also die Höhe des Elements in Uniapp?

Methode 1: uni.createComponent()

Verwenden Sie in Uniapp uni.createComponent(), um benutzerdefinierte Komponenten dynamisch zu erstellen. In einer benutzerdefinierten Komponente können wir die Methode uni.createSelectorQuery() in der Lebenszyklusfunktion der benutzerdefinierten Komponente verwenden, um die Informationen des Elementknotens, einschließlich der Höhe, Breite usw. des Elements, abzurufen.

Nehmen Sie als Beispiel das Abrufen der Höhe eines div-Elements:

In der erstellten Lebenszyklusfunktion der benutzerdefinierten Komponente können Sie die Methode uni.createSelectorQuery() verwenden, um die Informationen des Elements abzurufen. Der spezifische Code lautet wie folgt:

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    created () {
      // 获取元素的信息
      uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
        console.log('元素高度为：' + rect.height)
      }).exec()
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Verwenden Sie im obigen Code ref, um den Verweis auf das div-Element abzurufen, und verwenden Sie dann die Methode uni.createSelectorQuery() in der erstellten Lebenszyklusfunktion, um die Informationen des Elements abzufragen. Unter diesen bedeutet select('.content'), das Element abzufragen, dessen Klasse Inhalt ist, und die MethodeboundingClientRect() bedeutet, die Größeninformationen des Elements abzufragen. Das in der Rückruffunktion zurückgegebene Rect ist ein Objekt, das die Position enthält. Größe und andere Informationen des Elements.

Methode 2: uni.pageScrollTo()

In manchen Fällen müssen wir die Höhe eines Elements auf der Seite ermitteln, was mit der Methode uni.pageScrollTo() erreicht werden kann. Der spezifische Code lautet wie folgt:

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      // 获取页面中元素的高度
      uni.pageScrollTo({
        selector: '.content',
        success: (res) => {
          console.log('元素高度为：' + res[0].top)
        }
      })
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Im obigen Code wird die gemountete Lebenszyklusfunktion verwendet und die uni.pageScrollTo()-Methode wird verwendet, nachdem das Rendern der Seite abgeschlossen ist. Selektor: „.content“ bedeutet, dass Elemente mit Klasseninhalt abgefragt werden. Die res in der Erfolgsrückruffunktion kann die Elementinformationen abrufen, wobei res[0].top den Abstand zwischen dem Element und dem oberen Rand der Seite bedeutet.

Zusammenfassung:

Die beiden oben genannten Methoden eignen sich zum Ermitteln der Höhe von Elementen in benutzerdefinierten Komponenten und die letztere zum Ermitteln der Höhe eines Elements auf der Seite. Beide haben ihre eigenen Vor- und Nachteile und Sie können je nach Szenario auswählen. Unabhängig davon, welche Methode verwendet wird, müssen Sie darauf achten, die Rückruffunktion der Größeninformationen innerhalb der entsprechenden Lebenszyklusfunktion oder -methode hinzuzufügen, um die Höhe und andere Informationen des Elements zu erhalten.

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Höhe eines Elements in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!