Bagaimana untuk mendapatkan ketinggian elemen dalam uniapp

Dalam proses membangunkan projek menggunakan uniapp, kita selalunya perlu mendapatkan ketinggian elemen untuk melaksanakan operasi dan reka letak yang sepadan, seperti mengira ketinggian item senarai secara dinamik, menetapkan ketinggian minimum komponen, dsb. Jadi, bagaimana untuk mendapatkan ketinggian elemen dalam uniapp?

Kaedah 1: uni.createComponent()

Dalam uniapp, gunakan uni.createComponent() untuk mencipta komponen tersuai secara dinamik. Dalam komponen tersuai, kita boleh menggunakan kaedah uni.createSelectorQuery() dalam fungsi kitaran hayat komponen tersuai untuk mendapatkan maklumat nod elemen, termasuk ketinggian, lebar, dsb. elemen.

Ambil mendapatkan ketinggian elemen div sebagai contoh:

Dalam fungsi kitaran hayat yang dicipta bagi komponen tersuai, anda boleh menggunakan kaedah uni.createSelectorQuery() untuk mendapatkan maklumat elemen . Kod khusus adalah seperti berikut:

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    created () {
      // 获取元素的信息
      uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
        console.log('元素高度为：' + rect.height)
      }).exec()
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Dalam kod di atas, ref digunakan untuk mendapatkan rujukan elemen div, dan kemudian kaedah uni.createSelectorQuery() digunakan dalam kitaran hayat yang dicipta. berfungsi untuk menanyakan maklumat elemen. Antaranya, pilih('.content') bermaksud untuk menanyakan elemen yang kelasnya adalah kandungan, dan kaedah boundingClientRect() bermaksud untuk menanyakan maklumat saiz elemen Rect yang dikembalikan dalam fungsi panggil balik ialah objek yang mengandungi kedudukan, saiz dan maklumat lain unsur.

Kaedah 2: uni.pageScrollTo()

Dalam sesetengah kes, kita perlu mendapatkan ketinggian elemen pada halaman, yang boleh dicapai menggunakan kaedah uni.pageScrollTo(). Kod khusus adalah seperti berikut:

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      // 获取页面中元素的高度
      uni.pageScrollTo({
        selector: '.content',
        success: (res) => {
          console.log('元素高度为：' + res[0].top)
        }
      })
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Dalam kod di atas, fungsi kitaran hayat yang dipasang digunakan dan kaedah uni.pageScrollTo() digunakan selepas pemaparan halaman selesai. pemilih: '.content' bermaksud menanyakan elemen dengan kandungan kelas Res dalam fungsi panggil balik kejayaan boleh mendapatkan maklumat elemen, dengan res[0].top bermaksud jarak antara elemen dan bahagian atas halaman.

Ringkasan:

Dua kaedah di atas, yang pertama sesuai untuk mendapatkan ketinggian elemen dalam komponen tersuai, dan yang kedua sesuai untuk mendapatkan ketinggian elemen pada halaman. Kedua-duanya mempunyai kelebihan dan kekurangan masing-masing, dan anda boleh memilih mengikut senario tertentu. Tidak kira kaedah mana yang digunakan, anda perlu memberi perhatian untuk menambah fungsi panggil balik maklumat saiz dalam fungsi atau kaedah kitaran hayat yang sepadan untuk mendapatkan ketinggian dan maklumat lain elemen tersebut.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan ketinggian elemen dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!