uniapp에서 돔 높이를 얻는 방법이 부정확합니다.

머리말

uniapp을 사용하여 작은 프로그램을 개발하는 과정에서 DOM 요소의 높이를 구해야 하는 상황에 자주 직면하게 됩니다. 그러나 때로는 uni.createSelectorQuery().select().boundingClientRect()를 통해 얻은 높이가 정확하지 않은 경우가 있습니다. 그렇다면 이러한 상황은 어떻게 발생하게 되었는가? 어떻게 해결하나요? 이 기사에서는 이에 대해 자세히 설명합니다.

문제가 발생했습니다

먼저 문제를 재현해 보겠습니다. 예를 들어 아래의 간단한 템플릿에서는 하위 요소 content의 높이를 가져와야 합니다. 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-sizingrrreee

다음과 같은 방법으로 content 요소의 높이를 얻을 수 있습니다.

rrreee

그래서 콘솔에서 content의 높이를 볼 수 있습니다.

그러나 content 요소에 다음과 같은 일부 스타일을 추가하면:

rrreee

프로그램을 다시 실행하면 콘솔 출력 높이가 예상한 높이와 일치하지 않는다는 것을 알게 됩니다. 우리가 기대했던 것보다 약간 작습니다. 이것이 바로 우리가 자주 접하는 "부정확한 DOM 높이 획득" 문제입니다. 🎜🎜원인 분석🎜🎜그럼 문제의 원인은 무엇일까요? 데이터를 검토한 후 다음과 같은 이유를 알 수 있습니다. 🎜🎜1. 이 스타일만 사용하면 높이 계산 오류가 발생하고 가장자리가 흰색으로 변합니다. 🎜🎜2. 이는 margin과 padding이 요소에 대해 서로 다른 공간을 차지하는 반면 padding은 공간을 차지하지 않기 때문입니다. code>는 공간을 차지합니다. 🎜🎜boundingClientRect는 padding 및 border의 영향을 받지만 margin은 영향을 받지 않으므로 boundingClientRect의 높이는 padding의 높이보다 작습니다. 🎜🎜Solution🎜🎜문제의 원인을 파악했으므로 이제 해결책이 나올 준비가 되었습니다. 다음 방법을 통해 이 문제를 해결할 수 있습니다. 🎜🎜1 uni.createSelectorQuery().exec()를 통해 상위 요소의 높이를 가져온 다음 getCompulatedStyle을 통해 하위 요소를 가져옵니다. padding 및 border를 사용하여 하위 요소의 실제 높이를 계산합니다. 🎜rrreee🎜2. 하위 요소와 상위 요소 모두에 box-sizing:border-box 스타일을 추가하여 문제를 해결하세요. 🎜rrreee🎜여기서 두 가지 점에 주의해야 합니다. 🎜🎜 (1) 두 요소에 box-sizing 스타일을 추가해야 합니다. 🎜🎜(2) 자식 요소와 부모 요소 사이의 간격이 잘못된 것은 아닌지 주의가 필요합니다. 🎜🎜결론🎜🎜위의 방법을 통해 uniapp에서 DOM을 얻을 때 정확도가 높은 문제를 해결할 수 있습니다. 귀하의 상황에 맞게 선택하여 활용하시기 바랍니다. 이 글이 귀하에게 도움이 되기를 바랍니다. 🎜

위 내용은 uniapp에서 돔 높이를 얻는 방법이 부정확합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!