uniapp js définit la taille de l'élément

Avec la popularité croissante des applications mobiles, les développeurs front-end doivent définir différentes tailles d'éléments pour différents appareils mobiles. Utiliser uniapp js pour définir la taille des éléments est une méthode très efficace. Cet article explique comment définir la taille des éléments à l'aide d'uniapp js.

1. Utilisez des composants et des styles pour définir la taille des éléments

Dans uniapp, nous pouvons utiliser des composants et des styles pour définir la taille des éléments. Par exemple, nous pouvons utiliser le composant view pour créer un conteneur, puis utiliser les attributs width et height pour définir la taille du conteneur, comme indiqué ci-dessous :

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

Dans cet exemple, nous utilisons le composant view pour créer un conteneur. et définissez-le via l'attribut style. La largeur et la hauteur du conteneur sont respectivement de 200 pixels.

2. Utilisez js pour définir la taille de l'élément

En plus d'utiliser des composants et des styles pour définir la taille de l'élément, nous pouvons également utiliser js pour définir dynamiquement la taille de l'élément. uniapp nous fournit quelques méthodes pour implémenter cette fonction, comme indiqué ci-dessous :

1. uni.createSelectorQuery().select()

Cette méthode est utilisée pour obtenir les informations de l'élément spécifié, y compris la largeur et la hauteur de l'élément spécifié. élément et autres informations de taille. Nous pouvons utiliser ces informations pour calculer et définir dynamiquement la taille de l'élément.

Ce qui suit est un exemple. Dans cet exemple, nous utilisons la méthode uni.createSelectorQuery().select() pour obtenir les informations de largeur et de hauteur de l'élément h1, et définissons la largeur et la hauteur de l'élément h2 de sorte que le la taille de l'élément h2 est cohérente avec celle des éléments h1 qui sont les mêmes.

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

Dans cet exemple, nous obtenons d'abord les informations de largeur et de hauteur de l'élément h1, puis obtenons les informations de largeur et de hauteur de l'élément h2, et calculons le rapport de mise à l'échelle et la nouvelle hauteur de l'élément h2. Enfin, nous mettons à jour la propriété subtitleStyle du composant à l'aide de la méthode uni.$set pour appliquer l'échelle, la largeur et la hauteur à l'élément h2.

2. uni.$nextTick()

Cette méthode est utilisée pour effectuer des opérations DOM avant le prochain cycle de mise à jour. Étant donné que la liaison de données d'Uniapp est asynchrone, si nous devons attendre le prochain cycle de mise à jour pour obtenir des informations sur les éléments, nous devons utiliser cette méthode.

Dans l'exemple précédent, nous avons utilisé la méthode uni.$nextTick() pour attendre que l'élément soit mis à jour. Voici un autre exemple. Nous utilisons la directive v-if de vue pour contrôler l'affichage et le masquage des éléments, et en même temps utilisons la méthode uni.$nextTick() pour attendre que l'élément soit mis à jour.

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

Dans cet exemple, nous utilisons l'instruction v-show de vue pour contrôler l'affichage et le masquage des éléments, et utilisons également la méthode uni.$nextTick() pour attendre que l'élément soit mis à jour. Lorsque nous cliquons sur le bouton Basculer, contrôlons la valeur de l'attribut show, puis utilisons la méthode uni.$nextTick() pour obtenir les informations de largeur et de hauteur de l'élément.

En bref, dans uniapp, nous pouvons utiliser des composants, des styles et des méthodes js pour définir la taille des éléments. Ces trois méthodes ont leurs propres avantages et inconvénients, et nous pouvons choisir la méthode appropriée en fonction des besoins et des situations réels.

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!