uniappでコンテンツの高さを取得する方法

Uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークで、同じコードを複数のプラットフォーム用のアプリケーションにコンパイルできます。その中で、異なるプラットフォーム上でコンテンツを表示する場合、高さを動的に調整する必要がある場合があります。

Uniapp では、次のメソッドを通じてコン​​テンツの高さを取得できます。

1. uni.createSelectorQuery() メソッド

uni を使用します。 createSelectorQuery()メソッド Uniappのコンポーネント情報を取得するためのAPIの一つで、コンポーネントの幅、高さ、位置情報などの様々な情報を取得することができます。コンポーネント情報を取得したら、コールバック関数を使用して操作を実行できます。

たとえば、ビュー コンポーネントの高さ情報を取得する必要がある場合は、次のように進めることができます。

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

このうち、パラメーター '.view-class' はスタイル名です。ビューコンポーネントのboundingClientRect()メソッドでコンポーネントの位置とサイズ情報を取得でき、コールバック関数(rect)で取得したコンポーネント関連情報を取得します。

2. uni@v3 API の使用

Uniapp v3 バージョンでは、新しい API の追加を含め、API が大幅にアップグレードおよび変更されました。

uni@v3 API を使用すると、ページ内のノード情報を直接取得でき、await 構文を使用して非同期操作を実装できます。

uni@v3 API での高さの取得に関しては、次のように進めることができます:

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();
        });
    });
}

query.select('.view-class').boundingClientRect() ステートメントはコンポーネントを選択します高さについては、Promise を使用して、実行を続行する前に高さが取得されるまで非同期操作を待機させます。クエリ結果は res に保存され、高さ情報は res[0].height を通じて取得されます。

要約:

上記の 2 つの方法により、Uniapp 内のコンポーネントの高さ情報を取得し、必要に応じて調整および操作できます。実際の開発では、Uniapp の API と関連知識を深く学習して習得し、それをより適切に開発に適用する必要があります。

以上がuniappでコンテンツの高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。