uniappで要素の幅と高さを変更する方法-uni-app-php.cn

uniappで要素の幅と高さを変更する方法

PHPz

リリース： 2023-04-20 14:25:34

オリジナル

1680 人が閲覧しました

モバイルアプリケーションの継続的な開発に伴い、Uniapp フレームワークを使用してクロスプラットフォームアプリケーションを迅速に構築する開発者が増えています。 Uniapp では、ページ上の要素のスタイルを調整する必要がよくあります。要素の幅と高さは基本的なスタイル属性です。この記事では、このフレームワークをより上手に使用できるように、Uniapp の要素の幅と高さを変更する方法を紹介します。

style 属性を使用して要素の幅と高さを設定する

Uniapp では、各ページは vue ファイルで構成されており、ファイル内の style 属性を使用できます。要素の幅と高さを設定します。例:

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

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
  }
</style>

ログイン後にコピー

上の例では、ビュー要素を使用してボックスを表し、その幅と高さをそれぞれ 200px と 100px に設定します。ここで注意する必要があるのは、style 属性の値を二重引用符または一重引用符で囲む必要があることです。

クラス名を使用して要素の幅と高さを設定する

実際の開発では、要素のグループに同じ幅と高さを設定する必要があることがよくあります。、クラス名を使用して設定できます。例:

<template>
  <view class="container">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
    width: 200px;
    height: 100px;
  }
</style>

ログイン後にコピー

上の例では、3 つのボックスを表すために 3 つのビュー要素を使用し、それらにクラス名ボックスを追加し、スタイルで表現されるクラス名を設定しました。要素の幅と高さ。

計算された属性を使用して要素の幅と高さを設定する

ページレイアウトの変更に基づいて要素の幅と高さを動的に計算する必要がある場合があります。この場合、Uniapp の計算プロパティが実装されているので使用できます。例:

<template>
  <view :style="{ width: boxWidth, height: boxHeight }"></view>
</template>

<script>
  export default {
    data() {
      return {
        boxWidth: '200px',
        boxHeight: '100px'
      }
    },
    
    computed: {
      boxSize() {
        if (this.$uni.getSystemInfoSync().windowWidth > 750) {
          return {
            width: '400px',
            height: '200px'
          }
        } else {
          return {
            width: '200px',
            height: '100px'
          }
        }
      }
    },
    
    watch: {
      boxSize(newValue, oldValue) {
        this.boxWidth = newValue.width;
        this.boxHeight = newValue.height;
      }
    }
  }
</script>

ログイン後にコピー

上の例では、Uniapp の計算プロパティを使用してボックスの幅と高さを計算しました。ウィンドウの幅が 750 ピクセルより大きい場合、ボックスの幅と高さを 400 ピクセルと 200 ピクセルに設定し、それ以外の場合は 200 ピクセルと 100 ピクセルに設定します。計算されたプロパティ boxSize が変更されると、watch を使用して変更をリッスンし、新しい幅と高さをそれぞれ boxWidth と boxHeight に割り当てます。

概要

Uniapp では、style 属性、クラス名、および計算された属性を使用して要素の幅と高さを設定できます。さまざまなニーズに応じて、使用する方法を柔軟に選択できます。幅と高さの調整を上手に使用すると、ページレイアウトをより適切で美しいものにすることができます。

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