Comment utiliser la boucle pour déterminer la largeur et modifier la largeur dans Uniapp

Avec la popularité des applications mobiles, les développeurs ont fourni de nombreux outils et frameworks de développement pratiques. UniApp est un framework multiplateforme qui permet aux développeurs d'utiliser le même code pour créer des applications sur plusieurs plateformes. Dans UniApp, nous devons souvent résoudre certains problèmes de mise en page et de style. Comment effectuer une boucle pour déterminer la largeur et modifier la largeur est l'un des problèmes courants.

Tout d'abord, nous devons clarifier les exigences. Ce que nous voulons réaliser, c'est placer plusieurs sous-éléments de largeurs inégales dans un conteneur lorsque la somme des largeurs de tous les sous-éléments est inférieure à la largeur du sous-élément. conteneur, la largeur des sous-éléments doit être divisée de manière égale par la largeur du conteneur, et la largeur de chaque sous-élément n'est pas inférieure à une valeur spécifiée si la somme des largeurs est supérieure à la largeur du conteneur. conteneur, la largeur de chaque sous-élément doit être réduite proportionnellement pour s'adapter au conteneur.

Ensuite, nous pouvons envisager d'utiliser l'instruction v-for dans Vue pour restituer les éléments enfants en boucle, tout en définissant une variable pour stocker la largeur de l'élément enfant et en modifiant sa valeur en fonction de la situation réelle. Le code est le suivant :

<template>
  <view class="container">
    <view class="item"
          v-for="(item, index) in itemList"
          :key="index"
          :style="&#39;width: &#39; + itemWidth[index] + &#39;px;&#39;">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: ['Apple', 'Banana', 'Cherry', 'Grape', 'Orange'],
      containerWidth: 100, // 容器宽度
      itemWidth: [], // 子元素宽度
      minItemWidth: 30 // 子元素最小宽度
    }
  },
  mounted() {
    this.calculateWidth()
  },
  methods: {
    calculateWidth() {
      const totalWidth = this.itemList.reduce((pre, cur) => {
        return pre + this.calculateTextWidth(cur)
      }, 0)
      if (totalWidth < this.containerWidth) {
        // 宽度不足，均分
        const width = Math.floor(this.containerWidth / this.itemList.length)
        this.itemWidth = this.itemList.map(() => width)
      } else {
        // 宽度过多，按比例缩小
        let availableWidth = this.containerWidth
        const result = this.itemList.reduce((pre, cur) => {
          const curWidth = this.calculateTextWidth(cur)
          const minCurWidth = Math.min(curWidth, this.minItemWidth)
          const ratio = curWidth / minCurWidth
          pre.push({
            originalWidth: curWidth,
            availableWidth: Math.floor(availableWidth / ratio),
            ratio: ratio
          })
          availableWidth -= Math.floor(availableWidth / ratio)
          return pre
        }, [])
        this.itemWidth = result.map(item => {
          return Math.max(item.availableWidth / item.ratio, this.minItemWidth)
        })
      }
    },
    calculateTextWidth(text) {
      // 通过uni.createSelectorQuery获取元素实际宽度
      return uni.createSelectorQuery().select('.text-measure')
        .boundingClientRect(rect => {
          return rect.width
        }).exec()
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.text-measure {
  visibility: hidden;
  position: absolute;
  left: -9999px;
}
</style>

L'idée d'implémentation du code ci-dessus est de calculer d'abord la relation entre la somme des largeurs des sous-éléments et la largeur du conteneur, puis de juger s'il est nécessaire de égalisez la largeur des sous-éléments ou réduisez-la proportionnellement en fonction de la situation réelle, et enfin utilisez les sous-éléments calculés. La largeur de l'élément est affectée à la variable itemWidth, et le v- La directive for est utilisée dans le modèle pour restituer les éléments enfants. itemWidth变量，并在模板中使用v-for指令来渲染子元素。

需要注意的是，为了计算文本宽度，我们需要定义一个text-measure类的元素来进行实际测量，同时使用uni.createSelectorQuery

Il convient de noter que pour calculer la largeur du texte, nous devons définir un élément de la classe text-measure pour la mesure réelle et utiliser uni.createSelectorQuery pour obtenir la largeur réelle de l'élément.

En résumé, UniApp est un framework puissant qui fournit de nombreux outils et composants pratiques pour résoudre divers problèmes de développement d'applications mobiles. Lorsqu'il s'agit de problèmes de mise en page et de style, utiliser une boucle pour déterminer la largeur et modifier la largeur est une méthode très efficace et pratique qui peut nous aider à créer rapidement l'effet de mise en page souhaité. 🎜

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!