uniapp怎麼取得dom高度不準確

前言

在使用 uniapp 開發小程式流程中，我們常常會遇到需要取得 DOM 元素高度的情況。但是，有時候我們會發現透過 uni.createSelectorQuery().select().boundingClientRect() 所獲得的高度並不準確。那麼這種情況是怎麼出現的呢？又該如何解決呢？本文將為大家詳細講解。

問題出現

首先，我們先來重現問題。如下面這個簡單的模板，我們需要取得子元素 content 的高度。

<template>
  <view>
    <view>内容区域</view>
  </view>
</template>

我們可以透過以下方式取得content 元素的高度：

mounted() {
  uni.createSelectorQuery().in(this).select('.content').boundingClientRect(rect => {
    console.log(rect.height)
  }).exec()
}

這樣我們就可以在控制台裡看到content 的高度。

但是，當我們為content 元素加上一些樣式，例如：

.content {
  margin: 10px; 
  padding: 20px;
}

再次運行程序，我們會發現控制台輸出的高度與我們預期的高度不一致，略小於我們期望的高度。這就是我們經常遇到的「取得 DOM 高度不準確」的問題。

原因分析

那麼，問題出現的原因是什麼呢？在經過查閱資料後，我們可以得知以下原因：

1.單獨使用這個樣式會導致高度計算錯誤，產生白邊。

2.這是因為margin 和padding 對於元素佔據的空間是不一樣的，margin 是不佔據空間的，而padding 是佔據空間的。

由於boundingClientRect 受到了padding 和border 的影響，而margin 不受影響，所以在boundingClientRect 取得的高度時會少去padding 的高度。

解決方案

既然掌握了問題出現的原因，解決方案也就呼之欲出了。我們可以透過以下方法來解決這個問題：

1.透過uni.createSelectorQuery().exec() 取得父元素的高度，再透過getComputedStyle 取得子元素的padding 和border，從而計算出子元素的實際高度。

mounted() {
  uni.createSelectorQuery().in(this).select('.container').boundingClientRect(rect => {
    const styles = getComputedStyle(this.$refs.content.$el)
    const paddingTop = parseInt(styles.paddingTop)
    const paddingBottom = parseInt(styles.paddingBottom)
    const borderTop = parseInt(styles.borderTopWidth)
    const borderBottom = parseInt(styles.borderBottomWidth)
    console.log(rect.height - paddingTop - paddingBottom - borderTop - borderBottom)
  }).exec()
}

2.透過為子元素和父元素都加上 box-sizing:border-box 樣式來解決問題。

.container,
.content {
  box-sizing: border-box;
  margin: 10px;
  padding: 20px;
}

這裡我們需要注意兩點：

（1）box-sizing 樣式需要加在兩個元素身上。

（2）需要注意子元素和父元素之間的間隔是否有誤。

結語

透過上述方法，我們可以解決 uniapp 取得 DOM 高度不準確的問題。請大家根據具體情況選擇使用，希望本文能對大家有幫助。

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