uniapp js menetapkan saiz elemen

Dengan peningkatan populariti aplikasi mudah alih, pembangun bahagian hadapan perlu menetapkan saiz elemen yang berbeza untuk peranti mudah alih yang berbeza. Menggunakan uniapp js untuk menetapkan saiz elemen ialah kaedah yang sangat berkesan. Artikel ini akan memperkenalkan cara menetapkan saiz elemen menggunakan uniapp js.

1. Gunakan komponen dan gaya untuk menetapkan saiz elemen

Dalam uniapp, kita boleh menggunakan komponen dan gaya untuk menetapkan saiz elemen. Sebagai contoh, kita boleh menggunakan komponen paparan untuk mencipta bekas, dan kemudian menggunakan sifat lebar dan ketinggian untuk menetapkan saiz bekas, seperti yang ditunjukkan di bawah:

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

Dalam contoh ini, kami menggunakan komponen paparan untuk mencipta bekas dan lulus Atribut gaya menetapkan lebar dan tinggi bekas kepada 200px masing-masing.

2. Gunakan js untuk menetapkan saiz elemen

Selain menggunakan komponen dan gaya untuk menetapkan saiz elemen, kami juga boleh menggunakan js untuk menetapkan saiz elemen secara dinamik. uniapp memberikan kami beberapa kaedah untuk melaksanakan fungsi ini, seperti yang ditunjukkan di bawah:

1. uni.createSelectorQuery().select()

Kaedah ini digunakan untuk mendapatkan yang ditentukan elemen Maklumat, termasuk maklumat saiz seperti lebar dan ketinggian elemen. Kita boleh menggunakan maklumat ini untuk mengira dan menetapkan saiz elemen secara dinamik.

Berikut ialah contoh Dalam contoh ini, kami menggunakan kaedah uni.createSelectorQuery().select() untuk mendapatkan maklumat lebar dan ketinggian elemen h1, dan tetapkan lebar dan tinggi h2. unsur supaya h2 Dimensi unsur adalah sama dengan unsur h1.

<template>
  <view class="container">
    <h1 id="title">Hello World</h1>
    <h2 id="subtitle">Subtitle</h2>
  </view>
</template>

<script>
  export default {
    onReady() {
      uni.createSelectorQuery().select('#title').boundingClientRect(rect => {
        uni.createSelectorQuery().select('#subtitle').boundingClientRect(subRect => {
          uni.createSelectorQuery().select('#subtitle').fields({ size: true }, size => {
            this.$nextTick(() => {
              uni.createSelectorQuery().select('#subtitle').boundingClientRect(newRect => {
                const scale = rect.width / newRect.width
                uni.createSelectorQuery().select('#subtitle').boundingClientRect(scaleRect => {
                  uni.createSelectorQuery().select('#subtitle').fields({ size: true }, subSize => {
                    const newHeight = subSize.height * scale
                    uni.createSelectorQuery().select('#subtitle').boundingClientRect(() => {
                      uni.$set(this, 'subtitleStyle',
                        `transform:translate(-50%,-50%)scale(${scale}); width:${subRect.width}px; height:${newHeight}px;`
                      )
                    }).exec()
                  }).exec()
                }).exec()
              }).exec()
            })
          }).exec()
        }).exec()
      }).exec()
    }
  }
</script>

Dalam contoh ini, kita mula-mula mendapatkan maklumat lebar dan ketinggian elemen h1, kemudian dapatkan maklumat lebar dan ketinggian elemen h2, dan hitung nisbah penskalaan dan ketinggian baharu elemen h2. Akhir sekali, kami mengemas kini sifat subtitleStyle komponen menggunakan kaedah uni.$set untuk menggunakan skala, lebar dan tinggi pada elemen h2.

2. uni.$nextTick()

Kaedah ini digunakan untuk melaksanakan operasi DOM sebelum kitaran kemas kini seterusnya. Oleh kerana pengikatan data uniapp adalah tidak segerak, jika kita perlu menunggu kitaran kemas kini seterusnya untuk mendapatkan maklumat elemen, kita perlu menggunakan kaedah ini.

Dalam contoh sebelumnya, kami menggunakan kaedah uni.$nextTick() untuk menunggu elemen dikemas kini. Berikut ialah satu lagi contoh. Kami menggunakan arahan v-if untuk mengawal paparan dan menyembunyikan elemen, dan pada masa yang sama menggunakan kaedah uni.$nextTick() untuk menunggu elemen dikemas kini.

<template>
  <view>
    <button @click="toggle">Toggle</button>
    <view v-show="show" ref="box" style="width: 200px; height: 200px; background-color: #ccc;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
        uni.$nextTick(() => {
          const { width, height } = this.$refs.box.$el.getBoundingClientRect()
          console.log(width, height)
        })
      }
    }
  }
</script>

Dalam contoh ini, kami menggunakan arahan v-show vue untuk mengawal paparan dan menyembunyikan elemen, dan menggunakan kaedah uni.$nextTick() untuk menunggu elemen dikemas kini. Apabila kami mengklik butang Togol, kawal nilai atribut show, dan kemudian gunakan kaedah uni.$nextTick() untuk mendapatkan maklumat lebar dan ketinggian elemen.

Ringkasnya, dalam uniapp, kita boleh menggunakan komponen, gaya dan kaedah js untuk menetapkan saiz elemen. Ketiga-tiga kaedah ini mempunyai kelebihan dan kekurangan yang tersendiri, dan kita boleh memilih kaedah yang sesuai mengikut keperluan dan situasi sebenar.

Atas ialah kandungan terperinci uniapp js menetapkan saiz elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!