uniapp で 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;
}

ここでは 2 つの点に注意する必要があります。

(1) box-sizing スタイルを 2 つの要素に追加する必要があります。

(2) 子要素と親要素の間隔が間違っていないか注意が必要です。

結論

上記の方法により、uniapp による DOM 取得の精度が高いという問題を解決できます。ご自身の状況に合わせてご利用ください。

以上がuniapp で dom の高さを取得する方法が不正確ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。