WeChatアプレットのコンテナコンポーネントビューは水平および垂直レイアウトを実現します

前の記事では、WeChat アプレットのファイル構造ディレクトリ分析を分析しました。この記事では、アプレットのコンテナ コンポーネント ビューの水平および垂直レイアウトを見ていきます。
プロジェクトで最も一般的に使用される 2 つのレイアウト方法、水平レイアウトと垂直レイアウトは、WeChat ミニ プログラムでの実装が比較的簡単です。
1. 水平水平レイアウト:

水平レイアウトを実装するには、4 つのビュー コンテナ コンポーネントが必要で、そのうちの 1 つは親コンテナです。次のように:

<!--index.wxml-->  
<view class="content">  
  <view  style="flex:1;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>

親コンテナに次のスタイルを与えます:

/**index.wxss**/  
.content{  
  display: flex;  
  flex-direction: row;  
}

ここで、display: flex はビューを柔軟なレイアウトに設定し、flex-direction: row; はレイアウトの方向を水平水平レイアウトに設定します。
3 つの自己コンテナ ビューで、高さを設定し、幅は設定せず、flex を 1 に設定します。これは、3 つの等しい幅を取得できるように画面幅をスコアリングすることを意味します。もちろん、その幅を設定することもできます。たとえば、次のように設定しました。

<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="width:50px;;height:100px;background-color:blue">box2</view>  
  <view style="width:50px;;height:100px;background-color:yellow">box3</view>  
</view>

各幅が 50px を占め、同じ縦横のレイアウトが実現されます。効果は次のとおりです。

そして、box1 を 50px の固定幅に設定し、box2 と box3 が幅
を設定せずに flex:1 を直接設定すると、コードは次のようになります。その結果、box1 がそれ​​に対応する約 50 ピクセルの幅を占め、残りの画面全体の幅が box2 と box3 で均等に分割されます。効果は次のとおりです:

2. 垂直レイアウト:

垂直レイアウトは水平レイアウトと似ていますが、幅を設定する必要がある場合は、レイアウト方法を垂直列に変更する必要があります。各ボックスの flex :1 アダプティブ レイアウトの場合、親コンテナに高さを与える必要があります。そうでない場合、子コンテナの高さは、テキストを折り返すだけの通知としてのみ表示されます。もちろん、各ボックスの高さを設定することもできます。ここではアダプティブを選択しているので、親コンテナの高さを 600 ピクセルにし、内部の 3 つのボックスで高さを均等に分割します。コード

は次のとおりです:

<!--index.wxml-->  
<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>

/**index.wxss**/  
.content{  
  height: 600px;  
  display: flex;  
  flex-direction: column;  
}

効果は次のとおりです:

上記のメソッドを使用して、より柔軟なレイアウトを実現できます。

水平および垂直レイアウトを実現するための WeChat アプレットのコンテナ コンポーネント ビューに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。