Bagaimana untuk mengubah suai lebar dan ketinggian elemen dalam uniapp

Dengan pembangunan berterusan aplikasi mudah alih, semakin ramai pembangun mula menggunakan rangka kerja Uniapp untuk membina aplikasi merentas platform dengan cepat. Dalam Uniapp, kita selalunya perlu melaraskan gaya elemen pada halaman dan lebar serta ketinggian elemen ialah atribut gaya asas. Artikel ini akan memperkenalkan cara mengubah suai lebar dan ketinggian elemen dalam Uniapp, supaya anda boleh menggunakan rangka kerja ini dengan lebih mahir.

1. Gunakan atribut gaya untuk menetapkan lebar dan ketinggian elemen

Dalam Uniapp, setiap halaman terdiri daripada fail vue Kita boleh menggunakan atribut gaya dalam fail untuk Menetapkan lebar dan ketinggian elemen. Contohnya:

<template>
  <view class="container">
    <view class="box" style="width: 200px; height: 100px;"></view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
  }
</style>

Dalam contoh di atas, kami menggunakan elemen paparan untuk mewakili kotak dan menetapkan lebar dan tingginya kepada 200px dan 100px masing-masing. Apa yang perlu diperhatikan di sini ialah nilai atribut gaya perlu disertakan dalam petikan berganda atau petikan tunggal.

2. Gunakan nama kelas untuk menetapkan lebar dan tinggi elemen

Dalam pembangunan sebenar, kita selalunya perlu menetapkan lebar dan ketinggian yang sama untuk sekumpulan elemen , kita boleh menggunakan nama kelas untuk menetapkan. Contohnya:

<template>
  <view class="container">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
    width: 200px;
    height: 100px;
  }
</style>

Dalam contoh di atas, kami menggunakan tiga elemen paparan untuk mewakili tiga kotak, menambah kotak nama kelas padanya dan menetapkan nama kelas ini dalam gaya Mewakili lebar dan ketinggian unsur.

3. Gunakan atribut yang dikira untuk menetapkan lebar dan ketinggian elemen

Kadangkala, kita perlu mengira lebar dan tinggi elemen secara dinamik berdasarkan perubahan dalam reka letak halaman kes ini, kita boleh menggunakan sifat Uniapp Computed yang dilaksanakan. Contohnya:

<template>
  <view :style="{ width: boxWidth, height: boxHeight }"></view>
</template>

<script>
  export default {
    data() {
      return {
        boxWidth: '200px',
        boxHeight: '100px'
      }
    },
    
    computed: {
      boxSize() {
        if (this.$uni.getSystemInfoSync().windowWidth > 750) {
          return {
            width: '400px',
            height: '200px'
          }
        } else {
          return {
            width: '200px',
            height: '100px'
          }
        }
      }
    },
    
    watch: {
      boxSize(newValue, oldValue) {
        this.boxWidth = newValue.width;
        this.boxHeight = newValue.height;
      }
    }
  }
</script>

Dalam contoh di atas, kami menggunakan sifat terkira Uniapp untuk mengira lebar dan tinggi kotak. Apabila lebar tetingkap lebih besar daripada 750px, kami menetapkan lebar dan tinggi kotak kepada 400px dan 200px, jika tidak, tetapkan kepada 200px dan 100px. Apabila saiz kotak harta yang dikira berubah, kami menggunakan jam tangan untuk mendengar perubahan dan menetapkan lebar dan tinggi baharu masing-masing kepada boxWidth dan boxHeight.

Ringkasan

Dalam Uniapp, kita boleh menggunakan atribut gaya, nama kelas dan atribut yang dikira untuk menetapkan lebar dan ketinggian elemen. Bergantung pada keperluan yang berbeza, kita boleh memilih kaedah yang hendak digunakan secara fleksibel. Penggunaan mahir pelarasan lebar dan ketinggian boleh menjadikan reka letak halaman anda lebih baik dan cantik.

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