Cara menggunakan gelung untuk menentukan lebar dan menukar lebar dalam uniapp

Dengan populariti aplikasi mudah alih, pembangun telah menyediakan banyak alatan dan rangka kerja pembangunan yang mudah digunakan UniApp ialah rangka kerja merentas platform yang membolehkan pembangun menggunakan kod yang sama untuk membina aplikasi pada berbilang platform. Dalam UniApp, kita selalunya perlu menangani beberapa isu susun atur dan gaya Cara menggelung untuk menentukan lebar dan menukar lebar adalah salah satu masalah biasa.

Pertama sekali, kami perlu menjelaskan keperluan yang ingin kami capai ialah meletakkan berbilang sub-elemen dengan lebar yang tidak sama dalam bekas Apabila jumlah lebar semua sub-elemen adalah kurang daripada lebar bekas, lebar sub-elemen mestilah Bahagikan lebar bekas sama rata, dan lebar setiap elemen anak tidak kurang daripada nilai yang ditentukan Jika jumlah lebar lebih besar daripada lebar bekas, lebar setiap elemen kanak-kanak perlu dikurangkan secara berkadar agar muat dengan bekas.

Seterusnya, kita boleh mempertimbangkan untuk menggunakan arahan v-for dalam Vue untuk menjadikan elemen kanak-kanak dalam gelung, sambil mentakrifkan pembolehubah untuk menyimpan lebar elemen kanak-kanak dan menukar nilainya mengikut situasi sebenar. Kodnya adalah seperti berikut:

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

Idea pelaksanaan kod di atas adalah untuk mengira dahulu hubungan antara jumlah lebar sub-elemen dan lebar bekas, dan kemudian tentukan sama ada perlu untuk menyamakan lebar sub-elemen atau mengurangkannya secara berkadar berdasarkan situasi sebenar Akhir sekali, tetapkan lebar terkira elemen anak kepada pembolehubah itemWidth dan gunakan arahan v-for dalam. templat untuk memaparkan elemen kanak-kanak.

Perlu diambil perhatian bahawa untuk mengira lebar teks, kita perlu mentakrifkan elemen kelas text-measure untuk pengukuran sebenar dan menggunakan uni.createSelectorQuery untuk mendapatkan lebar sebenar elemen.

Ringkasnya, UniApp ialah rangka kerja berkuasa yang menyediakan banyak alatan dan komponen yang mudah untuk menyelesaikan pelbagai masalah pembangunan aplikasi mudah alih. Apabila menangani isu susun atur dan gaya, menggunakan gelung untuk menentukan lebar dan menukar lebar adalah kaedah yang sangat berkesan dan praktikal yang boleh membantu kami membina kesan reka letak yang kami inginkan dengan cepat.

Atas ialah kandungan terperinci Cara menggunakan gelung untuk menentukan lebar dan menukar lebar dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!