Wie man die Domhöhe in Uniapp ermittelt, ist ungenau

Vorwort

Bei der Entwicklung kleiner Programme mit uniapp stoßen wir häufig auf Situationen, in denen wir die Höhe von DOM-Elementen ermitteln müssen. Manchmal stellen wir jedoch fest, dass die über uni.createSelectorQuery().select().boundingClientRect() erhaltene Höhe nicht korrekt ist. Wie kam es also zu dieser Situation? Wie kann man es lösen? Dieser Artikel wird es Ihnen im Detail erklären.

Es tritt ein Problem auf

Reproduzieren wir zunächst das Problem. In der einfachen Vorlage unten müssen wir beispielsweise die Höhe des untergeordneten Elements content ermitteln. 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

Wir können die Höhe des content-Elements auf folgende Weise ermitteln:

rrreee

So können wir die Höhe von content in der Konsole sehen.

Wenn wir jedoch einige Stile zum content-Element hinzufügen, wie zum Beispiel:

rrreee

Führen Sie das Programm erneut aus, werden wir feststellen, dass die Höhe der Konsolenausgabe nicht mit der erwarteten Höhe übereinstimmt. etwas kleiner als das, was wir hoch erwartet hatten. Dies ist das Problem der „ungenauen Erfassung der DOM-Höhe“, auf das wir häufig stoßen. 🎜🎜Ursachenanalyse🎜🎜Was ist also die Ursache des Problems? Nach Durchsicht der Daten können wir die folgenden Gründe herausfinden: 🎜🎜1. Die alleinige Verwendung dieses Stils führt zu Fehlern bei der Höhenberechnung und weißen Kanten. 🎜🎜2. Dies liegt daran, dass margin und padding unterschiedliche Leerzeichen für Elemente belegen, während padding code> nimmt Platz ein. 🎜🎜Da <code>boundingClientRect von padding und border betroffen ist, margin jedoch nicht betroffen ist, gilt in boundingClientRect ist geringer als die Höhe von padding. 🎜🎜Lösung🎜🎜Da wir nun die Ursache des Problems erkannt haben, steht die Lösung bereit. Wir können dieses Problem mit den folgenden Methoden lösen: 🎜🎜1. Ermitteln Sie die Höhe des übergeordneten Elements über uni.createSelectorQuery().exec() und rufen Sie dann das untergeordnete Element über getComputedStyle ab padding und border, um die tatsächliche Höhe des untergeordneten Elements zu berechnen. 🎜rrreee🎜2. Lösen Sie das Problem, indem Sie den Stil box-sizing:border-box sowohl zum untergeordneten Element als auch zum übergeordneten Element hinzufügen. 🎜rrreee🎜Wir müssen hier auf zwei Punkte achten: 🎜🎜 (1) Der box-sizing-Stil muss zu zwei Elementen hinzugefügt werden. 🎜🎜(2) Sie müssen darauf achten, ob der Abstand zwischen dem untergeordneten Element und dem übergeordneten Element falsch ist. 🎜🎜Fazit🎜🎜Durch die oben genannten Methoden können wir das Problem der hohen Ungenauigkeit beim Erhalten von DOM durch uniapp lösen. Bitte wählen Sie die Verwendung entsprechend Ihrer spezifischen Situation. Ich hoffe, dass dieser Artikel für Sie hilfreich sein kann. 🎜

Das obige ist der detaillierte Inhalt vonWie man die Domhöhe in Uniapp ermittelt, ist ungenau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!