uniappで要素の高さを取得する方法

uniapp を使用してプロジェクトを開発するプロセスでは、リスト項目の高さの動的計算、コンポーネントの最小高さの設定など、対応する操作やレイアウトを実行するために要素の高さを取得する必要があることがよくあります。では、uniapp で要素の高さを取得するにはどうすればよいでしょうか?

方法 1: uni.createComponent()

uniapp では、uni.createComponent() を使用してカスタム コンポーネントを動的に作成します。カスタム コンポーネントでは、カスタム コンポーネントのライフサイクル関数で uni.createSelectorQuery() メソッドを使用して、要素の高さ、幅などを含む要素ノードの情報を取得できます。

div 要素の高さの取得を例に挙げます。

カスタム コンポーネントの作成されたライフサイクル関数では、uni.createSelectorQuery() メソッドを使用して要素情報を取得できます。

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

上記のコードでは、 ref を使用して div 要素の参照を取得し、作成されたライフサイクル関数で uni.createSelectorQuery() メソッドを使用して、要素情報を問い合わせます。このうち、select('.content') メソッドはクラスが content である要素をクエリすることを意味し、boundingClientRect() メソッドは要素のサイズ情報をクエリすることを意味し、コールバック関数で返される Rect は位置を含むオブジェクトであり、要素のサイズとその他の情報。

方法 2: uni.pageScrollTo()

場合によっては、ページ上の要素の高さを取得する必要があります。これは、uni.pageScrollTo() メソッドを使用して取得できます。具体的なコードは次のとおりです。

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

上記のコードでは、実装されたライフサイクル関数が使用され、ページのレンダリングが完了した後に uni.pageScrollTo() メソッドが使用されます。 selector: '.content' は、クラスのコンテンツを持つ要素をクエリすることを意味します。success コールバック関数の res は要素情報を取得できます。res[0].top は要素とページの先頭の間の距離を意味します。

概要:

上記 2 つのメソッドは、前者はカスタム コンポーネントの要素の高さを取得するのに適しており、後者はページ上の要素の高さを取得するのに適しています。どちらにも独自の長所と短所があり、特定のシナリオに応じて選択できます。どのメソッドを使用する場合でも、要素の高さなどの情報を取得するには、対応するライフサイクル関数またはメソッド内にサイズ情報のコールバック関数を追加することに注意する必要があります。

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