ループを使用して幅を決定し、uniapp で幅を変更する方法

モバイル アプリケーションの人気に伴い、開発者は多くの便利な開発ツールやフレームワークを提供しています。UniApp は、開発者が同じコードを使用して複数のプラットフォームでアプリケーションを構築できるようにするクロスプラットフォーム フレームワークです。 UniApp では、レイアウトやスタイルの問題に対処する必要があることがよくありますが、幅の決定と幅の変更をループする方法はよくある問題の 1 つです。

まず要件を明確にする必要があります。私たちが実現したいのは、幅が等しくない複数のサブ要素をコンテナ内に配置することです。すべてのサブ要素の幅の合計が より小さい場合コンテナの幅、子要素の幅はコンテナの幅を均等に分割し、各子要素の幅が指定された値以上である必要があります。幅の合計がコンテナの幅より大きい場合は、コンテナーに合わせて、各子要素の幅を比例的に縮小する必要があります。

次に、Vue の v-for 命令を使用して子要素をループでレンダリングしながら、子要素の幅を格納する変数を定義し、実際の状況に応じてその値を変更することを検討します。コードは次のとおりです。

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

上記のコードの実装の考え方は、最初にサブ要素の幅の合計とコンテナーの幅の関係を計算し、次にそれが必要かどうかを判断することです。子要素の幅を等しくするか、実際の状況に基づいて比例的に縮小し、最後に計算された子要素の幅が itemWidth 変数と v-for ディレクティブに割り当てられます。子要素をレンダリングするためにテンプレートで使用されます。

なお、テキスト幅を計算するには、実際に計測するための text-measure クラスの要素を定義し、uni.createSelectorQuery# を使用する必要があります。 ## 要素の実際の幅を取得します。

要約すると、UniApp は、モバイル アプリケーション開発のさまざまな問題を解決するための多くの便利なツールとコンポーネントを提供する強力なフレームワークです。レイアウトとスタイルの問題に対処する場合、ループを使用して幅を決定し、幅を変更することは、必要なレイアウト効果を迅速に構築するのに役立つ非常に効果的で実用的な方法です。

以上がループを使用して幅を決定し、uniapp で幅を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。