So erhalten Sie die Höhe des Inhalts in Uniapp

Uniapp ist ein plattformübergreifendes Entwicklungsframework auf Basis von Vue.js, das denselben Code in Anwendungen für mehrere Plattformen kompilieren kann. Unter anderem muss die Höhe für die Inhaltspräsentation auf verschiedenen Plattformen möglicherweise dynamisch angepasst werden.

In Uniapp können Sie die Höhe des Inhalts mit den folgenden Methoden ermitteln:

1. Verwenden Sie die Methode uni.createSelectorQuery()

Die Methode uni.createSelectorQuery() ist eine der APIs in Uniapp, um Komponenteninformationen abzurufen Sie können verschiedene Informationen zur Komponente abrufen, einschließlich Breite, Höhe, Positionsinformationen usw. Nachdem Sie die Komponenteninformationen erhalten haben, können Sie mit der Rückruffunktion Vorgänge ausführen.

Wenn Sie beispielsweise die Höheninformationen einer Ansichtskomponente benötigen, können Sie wie folgt vorgehen:

uni.createSelectorQuery().select('.view-class').boundingClientRect((rect)=>{
    console.log(rect.height);
}).exec()

Unter anderem ist der Parameter „.view-class“ der Stilname der Ansichtskomponente und die . Die BoundingClientRect()-Methode kann die Positions- und Größeninformationen der Komponente abrufen, die Rückruffunktion (rect) ist die erhaltenen komponentenbezogenen Informationen.

2. Verwendung der uni@v3-API

In der Uniapp v3-Version wurde die API erheblich aktualisiert und geändert, einschließlich der Hinzufügung neuer APIs.

Durch die Verwendung der uni@v3-API können Sie die Knoteninformationen direkt auf der Seite abrufen und die Wait-Syntax verwenden, um asynchrone Vorgänge zu implementieren.

Um die Höhe in der uni@v3-API zu erhalten, können Sie wie folgt vorgehen:

async function getHeight() {
    const query = uni.createSelectorQuery();
    await new Promise(resolve => {
        query.select('.view-class').boundingClientRect();
        query.exec(res => {
            console.log(res[0].height);
            resolve();
        });
    });
}

Die Anweisung query.select('.view-class').boundingClientRect() wählt die Komponente aus, ruft ihre Höhe ab und verwendet Promise dazu Machen Sie es asynchron. Der Vorgang wartet auf den Erhalt der Höhe, bevor er mit der Ausführung fortfährt. Die Abfrageergebnisse werden in res gespeichert und die Höheninformationen werden über res[0].height abgerufen.

Zusammenfassung:

Durch die beiden oben genannten Methoden können wir die Höheninformationen der Komponente in Uniapp abrufen und sie nach Bedarf anpassen und bedienen. In der tatsächlichen Entwicklung müssen Sie die API und das damit verbundene Wissen in Uniapp gründlich studieren und beherrschen, um sie in der Entwicklung besser anwenden zu können.

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