前言
在使用 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.這是因為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中文網其他相關文章!