Cara mendapatkan ketinggian dom dalam uniapp adalah tidak tepat

Kata Pengantar

Dalam proses membangunkan program kecil menggunakan uniapp, kita sering menghadapi situasi di mana kita perlu mendapatkan ketinggian elemen DOM. Walau bagaimanapun, kadangkala kita dapati ketinggian yang diperoleh melalui uni.createSelectorQuery().select().boundingClientRect() adalah tidak tepat. Jadi bagaimana keadaan ini timbul? Bagaimana untuk menyelesaikannya? Artikel ini akan menerangkannya kepada anda secara terperinci.

Masalah berlaku

Mula-mula, mari kita ulang masalah itu. Sebagai contoh, dalam templat mudah di bawah, kita perlu mendapatkan ketinggian elemen kanak-kanak content.

<template>
  <view class="container">
    <view class="content" ref="content">内容区域</view>
  </view>
</template>

Kita boleh mendapatkan ketinggian elemen content dengan cara berikut:

mounted() {
  uni.createSelectorQuery().in(this).select('.content').boundingClientRect(rect => {
    console.log(rect.height)
  }).exec()
}

Supaya kita dapat melihat ketinggian content dalam konsol.

Walau bagaimanapun, apabila kita menambah beberapa gaya pada elemen content, seperti:

.content {
  margin: 10px; 
  padding: 20px;
}

Jalankan program sekali lagi, kita akan mendapati ketinggian output konsol tidak konsisten dengan ketinggian kami jangkakan, kurang sedikit daripada Ketinggian jangkaan kami. Inilah masalah "pemerolehan ketinggian DOM yang tidak tepat" yang sering kita hadapi.

Analisis Punca

Jadi, apakah punca masalah tersebut? Selepas menyemak data, kita boleh mengetahui sebab berikut:

1 Menggunakan gaya ini sahaja akan menyebabkan ralat pengiraan ketinggian dan menghasilkan tepi putih.

2. Ini kerana margin dan padding menempati ruang yang berbeza untuk margin tidak menempati ruang, manakala padding menduduki ruang yang berbeza.

Memandangkan boundingClientRect dipengaruhi oleh padding dan border, manakala margin tidak terjejas, ketinggian boundingClientRect akan menjadi kurang apabila mendapat ketinggian padding.

Penyelesaian

Sekarang kita telah memahami punca masalah, penyelesaiannya sedia untuk keluar. Kita boleh menyelesaikan masalah ini melalui kaedah berikut:

1 Dapatkan ketinggian elemen induk melalui uni.createSelectorQuery().exec(), dan kemudian dapatkan getComputedStyle dan padding elemen anak melalui border hingga. hitung ketinggian sebenar unsur kanak-kanak.

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. Selesaikan masalah dengan menambahkan gaya box-sizing:border-box pada kedua-dua elemen anak dan elemen induk.

.container,
.content {
  box-sizing: border-box;
  margin: 10px;
  padding: 20px;
}

Kita perlu memberi perhatian kepada dua perkara di sini:

(1) box-sizing Gaya perlu ditambah kepada dua elemen.

(2) Anda perlu memberi perhatian sama ada selang antara elemen anak dan elemen induk adalah salah.

Kesimpulan

Melalui kaedah di atas, kita boleh menyelesaikan masalah ketinggian DOM yang tidak tepat yang diperoleh oleh uniapp. Sila pilih untuk menggunakannya mengikut situasi khusus anda. Saya harap artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara mendapatkan ketinggian dom dalam uniapp adalah tidak tepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!