2023uniapp怎么获取dom高度不准确

前言

在使用 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高度不准确的详细内容，更多请关注zzsucai.com其它相关文章！