uniapp jsは要素のサイズを設定します

モバイル アプリケーションの人気が高まるにつれ、フロントエンド開発者はモバイル デバイスごとに異なる要素サイズを設定する必要があります。 uniapp js を使用して要素のサイズを設定することは非常に効果的な方法です。この記事ではuniapp jsを使って要素サイズを設定する方法を紹介します。

1. コンポーネントとスタイルを使用して要素のサイズを設定する

uniapp では、コンポーネントとスタイルを使用して要素のサイズを設定できます。たとえば、以下に示すように、ビュー コンポーネントを使用してコンテナを作成し、幅と高さのプロパティを使用してコンテナのサイズを設定できます。

<template>
  <view class="container" style="width: 200px; height: 200px;"></view>
</template>

この例では、ビュー コンポーネントを使用します。コンテナを作成して渡します。 style 属性は、コンテナの幅と高さをそれぞれ 200px に設定します。

2. js を使用して要素サイズを設定する

コンポーネントとスタイルを使用して要素サイズを設定することに加えて、js を使用して要素サイズを動的に設定することもできます。 uniapp は、以下に示すように、この関数を実装するためのメソッドをいくつか提供します。

1. uni.createSelectorQuery().select()

このメソッドは、指定されたデータを取得するために使用されます。要素の幅や高さなどのサイズ情報を含む要素情報。この情報を使用して、要素のサイズを動的に計算および設定できます。

以下は例です。この例では、uni.createSelectorQuery().select() メソッドを使用して h1 要素の幅と高さの情報を取得し、h2 要素の幅と高さを設定します。 h2 要素の寸法が h1 要素と同じになるように要素を作成します。

<template>
  <view class="container">
    <h1 id="title">Hello World</h1>
    <h2 id="subtitle">Subtitle</h2>
  </view>
</template>

<script>
  export default {
    onReady() {
      uni.createSelectorQuery().select('#title').boundingClientRect(rect => {
        uni.createSelectorQuery().select('#subtitle').boundingClientRect(subRect => {
          uni.createSelectorQuery().select('#subtitle').fields({ size: true }, size => {
            this.$nextTick(() => {
              uni.createSelectorQuery().select('#subtitle').boundingClientRect(newRect => {
                const scale = rect.width / newRect.width
                uni.createSelectorQuery().select('#subtitle').boundingClientRect(scaleRect => {
                  uni.createSelectorQuery().select('#subtitle').fields({ size: true }, subSize => {
                    const newHeight = subSize.height * scale
                    uni.createSelectorQuery().select('#subtitle').boundingClientRect(() => {
                      uni.$set(this, 'subtitleStyle',
                        `transform:translate(-50%,-50%)scale(${scale}); width:${subRect.width}px; height:${newHeight}px;`
                      )
                    }).exec()
                  }).exec()
                }).exec()
              }).exec()
            })
          }).exec()
        }).exec()
      }).exec()
    }
  }
</script>

この例では、まず h1 要素の幅と高さの情報を取得し、次に h2 要素の幅と高さの情報を取得して、h2 要素の拡大縮小率と新しい高さを計算します。最後に、uni.$set メソッドを使用してコンポーネントのsubtitleStyleプロパティを更新し、スケール、幅、高さをh2要素に適用します。

2. uni.$nextTick()

このメソッドは、次の更新サイクルの前に DOM 操作を実行するために使用されます。 uniapp のデータ バインディングは非同期であるため、要素情報を取得するために次の更新サイクルを待つ必要がある場合は、このメソッドを使用する必要があります。

前の例では、uni.$nextTick() メソッドを使用して要素が更新されるのを待ちました。別の例として、vue の v-if ディレクティブを使用して要素の表示と非表示を制御し、同時に uni.$nextTick() メソッドを使用して要素が更新されるのを待ちます。

<template>
  <view>
    <button @click="toggle">Toggle</button>
    <view v-show="show" ref="box" style="width: 200px; height: 200px; background-color: #ccc;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
        uni.$nextTick(() => {
          const { width, height } = this.$refs.box.$el.getBoundingClientRect()
          console.log(width, height)
        })
      }
    }
  }
</script>

この例では、vue の v-show 命令を使用して要素の表示と非表示を制御し、uni.$nextTick() メソッドを使用して要素が更新されるのを待ちます。 [切り替え] ボタンをクリックして show 属性の値を制御し、uni.$nextTick() メソッドを使用して要素の幅と高さの情報を取得します。

つまり、uniapp では、コンポーネント、スタイル、js メソッドを使用して要素のサイズを設定できます。これら 3 つの方法にはそれぞれ長所と短所があり、実際のニーズと状況に応じて適切な方法を選択できます。

以上がuniapp jsは要素のサイズを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。