How to use loop to determine width and change width in uniapp

With the popularity of mobile applications, developers have provided many convenient development tools and frameworks. UniApp is a cross-platform framework that allows developers to use the same code to build applications on multiple platforms. In UniApp, we often need to deal with some layout and style issues. How to loop to determine the width and change the width is one of the common problems.

First of all, we need to clarify the requirements. What we want to achieve is to place multiple sub-elements with unequal widths in a container. When the sum of the widths of all sub-elements is less than the width of the container, the width of the sub-elements must be Divide the width of the container equally, and the width of each child element is not less than a specified value. If the sum of the widths is greater than the width of the container, the width of each child element needs to be proportionally reduced to fit the container.

Next, we can consider using the v-for instruction in Vue to render the child elements in a loop, while defining a variable to store the width of the child element and changing its value according to the actual situation. The code is as follows:

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

The implementation idea of ​​the above code is to first calculate the relationship between the sum of the sub-element widths and the container width, and then determine whether it is necessary to equalize the sub-element widths or reduce them proportionally based on the actual situation, and finally The calculated width of the child element is assigned to the itemWidth variable, and the v-for directive is used in the template to render the child element.

It should be noted that in order to calculate the text width, we need to define an element of the text-measure class for actual measurement, and use uni.createSelectorQuery to obtain it. The actual width of the element.

In summary, UniApp is a powerful framework that provides many convenient tools and components to solve various mobile application development problems. When dealing with layout and style issues, using a loop to determine the width and change the width is a very effective and practical method that can help us quickly build the layout effect we want.

The above is the detailed content of How to use loop to determine width and change width in uniapp. For more information, please follow other related articles on the PHP Chinese website!