Comment obtenir la hauteur du dom dans uniapp est inexact

Avant-propos

Dans le processus de développement de petits programmes à l'aide d'uniapp, nous rencontrons souvent des situations où nous devons obtenir la hauteur des éléments du DOM. Cependant, nous constatons parfois que la hauteur obtenue via uni.createSelectorQuery().select().boundingClientRect() n'est pas exacte. Alors comment cette situation est-elle née ? Comment le résoudre ? Cet article vous l’expliquera en détail.

Un problème survient

Tout d’abord, reproduisons le problème. Par exemple, dans le modèle simple ci-dessous, nous devons obtenir la hauteur de l'élément enfant 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

Nous pouvons obtenir la hauteur de l'élément content de la manière suivante :

rrreee

Nous pouvons donc voir la hauteur de content dans la console.

Cependant, lorsque nous ajoutons des styles à l'élément content, tels que :

rrreee

Exécutez à nouveau le programme, nous constaterons que la hauteur de la sortie de la console n'est pas cohérente avec la hauteur attendue, légèrement plus petit que ce à quoi nous nous attendions. C'est le problème de « l'acquisition imprécise de la hauteur du DOM » que l'on rencontre souvent. 🎜🎜Analyse des causes🎜🎜Alors, quelle est la cause du problème ? Après avoir examiné les données, nous pouvons découvrir les raisons suivantes : 🎜🎜1. L'utilisation de ce style seul entraînera des erreurs de calcul de hauteur et des bords blancs. 🎜🎜2. En effet, margin et padding occupent des espaces différents pour les éléments margin n'occupent pas d'espace, tandis que paddingcode> prend de la place. 🎜🎜Puisque <code>boundingClientRect est affecté par padding et border, mais margin n'est pas affecté, donc dans boundingClientRect sera inférieure à la hauteur de padding. 🎜🎜Solution🎜🎜Maintenant que nous avons compris la cause du problème, la solution est prête à sortir. Nous pouvons résoudre ce problème grâce aux méthodes suivantes : 🎜🎜1. Obtenez la hauteur de l'élément parent via uni.createSelectorQuery().exec(), puis récupérez l'élément enfant via getComputedStyle. padding et border pour calculer la hauteur réelle de l'élément enfant. 🎜rrreee🎜2. Résolvez le problème en ajoutant le style box-sizing:border-box à la fois à l'élément enfant et à l'élément parent. 🎜rrreee🎜Nous devons prêter attention à deux points ici : 🎜🎜 (1) Le style box-sizing doit être ajouté à deux éléments. 🎜🎜(2) Vous devez faire attention à savoir si l'intervalle entre l'élément enfant et l'élément parent est incorrect. 🎜🎜Conclusion🎜🎜Grâce aux méthodes ci-dessus, nous pouvons résoudre le problème de la grande inexactitude dans l'obtention du DOM par uniapp. Veuillez choisir de l'utiliser en fonction de votre situation spécifique. J'espère que cet article pourra vous être utile. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!