首頁 >web前端 >uni-app >uniapp怎麼取得dom高度不準確

uniapp怎麼取得dom高度不準確

PHPz
PHPz原創
2023-04-27 09:08:022715瀏覽

前言

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

問題出現

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

<template>
  <view class="container">
    <view class="content" ref="content">内容区域</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.這是因為marginpadding 對於元素佔據的空間是不一樣的,margin 是不佔據空間的,而padding 是佔據空間的。

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

解決方案

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

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

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn