在使用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中文網其他相關文章！
