Comment modifier la largeur et la hauteur des éléments dans uniapp

Avec le développement continu des applications mobiles, de plus en plus de développeurs commencent à utiliser le framework Uniapp pour créer rapidement des applications multiplateformes. Dans Uniapp, nous devons souvent ajuster les styles des éléments sur la page, et la largeur et la hauteur des éléments sont un attribut de style de base. Cet article explique comment modifier la largeur et la hauteur des éléments dans Uniapp, afin que vous puissiez utiliser ce framework plus habilement.

1. Utilisez l'attribut style pour définir la largeur et la hauteur de l'élément

Dans Uniapp, chaque page est composée d'un fichier vue Nous pouvons utiliser l'attribut style dans le fichier pour définir la largeur et la hauteur de l'élément. Par exemple :

<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>

Dans l'exemple ci-dessus, nous avons utilisé un élément view pour représenter une boîte et défini sa largeur et sa hauteur sur 200 px et 100 px respectivement. Ce qu'il faut noter ici, c'est que la valeur de l'attribut style doit être placée entre guillemets doubles ou simples.

2. Utilisez des noms de classe pour définir la largeur et la hauteur des éléments

Dans le développement réel, nous devons souvent définir la même largeur et la même hauteur pour un groupe d'éléments. Dans ce cas, nous pouvons utiliser des noms de classe pour les définir. Par exemple :

<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>

Dans l'exemple ci-dessus, nous avons utilisé trois éléments de vue pour représenter trois boîtes, leur avons ajouté une zone de nom de classe et défini la largeur et la hauteur de l'élément représenté par ce nom de classe dans le style.

3. Utilisez des propriétés calculées pour définir la largeur et la hauteur des éléments

Parfois, nous devons calculer dynamiquement la largeur et la hauteur des éléments en fonction des modifications de la mise en page. Dans ce cas, nous pouvons utiliser les propriétés calculées d'Uniapp pour y parvenir. Par exemple :

<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>

Dans l'exemple ci-dessus, nous avons utilisé les propriétés calculées d'Uniapp pour calculer la largeur et la hauteur de la boîte. Lorsque la largeur de la fenêtre est supérieure à 750 px, nous définissons la largeur et la hauteur de la boîte à 400 px et 200 px, sinon nous la définissons à 200 px et 100 px. Lorsque la propriété calculée boxSize change, nous utilisons watch pour écouter le changement et attribuer respectivement la nouvelle largeur et la nouvelle hauteur à boxWidth et boxHeight.

Résumé

Dans Uniapp, nous pouvons utiliser l'attribut de style, le nom de la classe et l'attribut calculé pour définir la largeur et la hauteur de l'élément. En fonction des différents besoins, nous pouvons choisir de manière flexible la méthode à utiliser. Une utilisation compétente des ajustements de largeur et de hauteur peut rendre la mise en page de votre page plus décente et plus belle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!