コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > WeChat アプレット > ミニプログラム開発 > 本文

WeChat ミニ プログラム: ビュー (ビュー コンテナ) コンポーネントの解釈と分析

高洛峰
リリース： 2017-03-16 14:09:03
オリジナル
5546 人が閲覧しました

View コンポーネントの説明:
ViewContainer
HTML コードの DIV と同様に、他のコンポーネントをラップしたり、他のコンポーネント内にラップしたりできます。比較的自由に使用でき、固定された構造はありません。

viewコンポーネントの使用法:

微信小程序：view（视图容器 ）组件解读和分析

サンプルプロジェクトのwxmlコード: 

<view  class="btnGroup">
        <view class="item orange" >退格</view>
        <view class="item orange" >清屏</view>
        <view class="item orange" >+/-</view>
        <view class="item orange" >+</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >9</view>
        <view class="item blue" >8</view>
        <view class="item blue" >7</view>
        <view class="item orange" >-</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >6</view>
        <view class="item blue" >5</view>
        <view class="item blue" >4</view>
        <view class="item orange" >×</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >3</view>
        <view class="item blue" >2</view>
        <view class="item blue" >1</view>
        <view class="item orange" >÷</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >0</view>
        <view class="item blue" >.</view>
        <view class="item blue" >历史</view>
        <view class="item orange" >=</view>
      </view>
ログイン後にコピー

WXSS サンプルプロジェクトのコード: 

.btnGroup{
    display:flex;
    flex-direction:row;
}
.orange{
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
}
.blue{
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
}
ログイン後にコピー

ビュースタイルのレンダリング flex-direction: row:

WXML コードは次のとおりです

<view class="flex-wrp">
    <view class="flex-item red" ></view>
    <view class="flex-item green" ></view>
    <view class="flex-item blue" ></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析 WXSS コードは次のとおりです:

.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style flex-direction: column rendering:

WXML コードは次のとおりです:

<view class="flex-wrp column">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析 WXSS コードは次のとおりです: 

.column{
   flex-direction:column;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

ビュー スタイル just

if

y-content: flex-start のレンダリング:

WXML コードは次のとおりです: 

<view class="flex-wrp flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析 WXSS コードは次のとおりです: 

.flex-start{
    flex-direction:row;
    justify-content: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

ビュー スタイルのレンダリングjustify-content: flex-

end

:

WXML コードは次のとおりです: 

<view class="flex-wrp flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析 WXSS コードは次のとおりです: 

.flex-end{
    flex-direction:row;
    justify-content: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style justify-content: rendering of center:

WXML コードは次のとおりです: 

<view class="flex-wrp justify-content-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析 WXSS コードは次のとおりです: 

.justify-content-center{
    flex-direction:row;
    justify-content: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style justify-content: The rendering of space-between:

'

WXML コードは次のとおりです: 

<view class="flex-wrp space-between">
  <view class="flex-item" style="background: red"></view>
  <view class="flex-item" style="background: green"></view>
  <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析The WXSS コードは次のとおりです: 

.space-between{
  flex-direction:row;
  justify-content: space-between;
}
.flex-wrp{
  height: 100px;
  display:flex;
  background-color: #FFFFFF;
}
.flex-item{
  width: 100px;
  height: 100px;
}
.red{
  background: red;
}
.green{
  background: green;
}
.blue{
  background: blue;
}
ログイン後にコピー

ビュー スタイルのレンダリング justify-content: space-around:

WXML コードは次のとおりです: 

<view class="flex-wrp space-around">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析WXSS コードは次のとおりです: 

.space-around{
    flex-direction:row;
    justify-content: space-around;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style align- items: flex-end レンダリング:

WXML コードは次のとおりです: 

<view class="flex-wrp align-items-flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析WXSS コードは次のとおりです: 

.align-items-flex-end{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style align-items: center レンダリング 画像:

WXML コードは次のとおりです: 

<view class="flex-wrp align-items-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析WXSS コードは次のとおりです: 

.align-items-center{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

View style align-items: flex-start rendering:

WXML コードは次のとおりです: 

<view class="flex-wrp align-items-flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
ログイン後にコピー
微信小程序：view（视图容器 ）组件解读和分析WXSS コードは次のとおりです: 

.align-items-flex-start{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
ログイン後にコピー

Main

attributes

:

配置 (フレックス方向)、wxss で使用

微信小程序：view（视图容器 ）组件解读和分析

wxssに使用される柔軟なアイテムコンテンツの配置(justify-content)

微信小程序：view（视图容器 ）组件解读和分析

wxssに使用されるコンテナの内側軸上のアイテムの配置(align-items)。

以上がWeChat ミニ プログラム: ビュー (ビュー コンテナ) コンポーネントの解釈と分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
WeChat アプレット
ソース：php.cn
前の記事：WeChat アプレット開発では、読み込みコンポーネントを使用して読み込みアニメーション メソッドを表示します。 次の記事：Pythonのカスタムモジュールとパッケージの詳しい説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
npx create-react-app コマンドでエラーが発生しました。どうすれば修正できますか? 「npxcreate-react-app」コマンドを使用して新しい React アプリを作成しようとしていますが、うまく機能していないようです。最近この問題に遭遇した人は他にもいま...
から 2024-04-05 14:42:18
0
1
3511
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
テーブルではなく DOM を通じてデータをレンダリングする方法 作成中のアプリケーションについて質問があります。Oracle データベースを使用しており、データベースから情報を取得し、テーブルを介して画面に表示していますが、データを個別に処理し...
から 2024-04-04 18:17:27
0
1
3567
Google SHOPIFYユーザーログイン後の認証プロセス Google にログインした後、ユーザーの承認されたアカウントに関する情報がどこにも見つかりません。 laravel ベースのアプリケーションがあります。Google にログインし...
から 2024-04-04 09:40:59
0
1
310
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート