uniapp怎麼取得元素的高度

在使用uniapp開發專案的過程中，我們經常需要取得元素的高度，以便進行對應的操作和佈局，例如動態計算清單項目的高度、設定元件的最小高度等等。那麼，uniapp中如何取得元素的高度呢？

方法一：uni.createComponent（）

在uniapp中，使用uni.createComponent()可以動態建立自訂元件。在自訂元件中，我們可以在自訂元件的生命週期函數中使用uni.createSelectorQuery()方法來取得元素節點的信息，包括元素的高度、寬度等等。

以獲得一個div元素的高度為例：

在自訂元件的created生命週期函數中，可以使用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元素的引用，然後在created生命週期函數中使用uni.createSelectorQuery()方法查詢元素的資訊。其中，select('.content')表示查詢class為content的元素，boundingClientRect()方法表示查詢元素的尺寸信息，回呼函數中傳回的rect是一個包含元素的位置、大小等資訊的物件。

方法二：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>

在上述程式碼中，使用mounted生命週期函數，在頁面渲染完成後使用uni.pageScrollTo()方法實作。 selector: '.content'表示查詢class為content的元素，success回呼函數中的res可以取得到元素的信息，其中res[0].top表示元素距離頁面頂部的距離。

總結：

以上兩種方法，前者適用於取得自訂元件中元素的高度，後者適用於取得頁面中某個元素的高度。二者各有優劣，可依具體場景進行選擇。無論使用哪種方法，都需要注意在對應生命週期函數或方法內添加尺寸資訊的回調函數，以便取得元素的高度等資訊。

以上是uniapp怎麼取得元素的高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！