So verwenden Sie eine Schleife, um die Breite zu bestimmen und die Breite in Uniapp zu ändern

Angesichts der Beliebtheit mobiler Anwendungen haben Entwickler viele praktische Entwicklungstools und Frameworks bereitgestellt. UniApp ist ein plattformübergreifendes Framework, das es Entwicklern ermöglicht, denselben Code zum Erstellen von Anwendungen auf mehreren Plattformen zu verwenden. In UniApp müssen wir uns häufig mit einigen Layout- und Stilproblemen befassen. Das Erstellen einer Schleife zur Bestimmung der Breite und zum Ändern der Breite ist eines der häufigsten Probleme.

Zunächst müssen wir die Anforderungen klären, wenn die Summe der Breiten aller Unterelemente kleiner ist als die Breite des Container, die Breite der Unterelemente sollte gleichmäßig durch die Breite des Containers geteilt werden, und die Breite jedes Unterelements darf nicht kleiner als ein angegebener Wert sein Container muss die Breite jedes Unterelements proportional reduziert werden, damit es in den Container passt.

Als nächstes können wir erwägen, die v-for-Anweisung in Vue zu verwenden, um die untergeordneten Elemente in einer Schleife darzustellen, während wir gleichzeitig eine Variable definieren, um die Breite des untergeordneten Elements zu speichern und seinen Wert entsprechend der tatsächlichen Situation zu ändern. Der Code lautet wie folgt:

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

Die Implementierungsidee des obigen Codes besteht darin, zunächst die Beziehung zwischen der Summe der Breiten der Unterelemente und der Breite des Containers zu berechnen und dann zu beurteilen, ob dies erforderlich ist Gleichen Sie die Breite der Unterelemente aus oder reduzieren Sie sie proportional zur tatsächlichen Situation und verwenden Sie schließlich die berechneten Unterelemente. Die Elementbreite wird der Variablen itemWidth zugewiesen, und die Variable v- Die Direktive for wird in der Vorlage zum Rendern der untergeordneten Elemente verwendet. itemWidth变量，并在模板中使用v-for指令来渲染子元素。

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine Schleife, um die Breite zu bestimmen und die Breite in Uniapp zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!