ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラム: ビュー (ビュー コンテナ) コンポーネントの解釈と分析
View コンポーネントの説明:
ViewContainer
HTML コードの DIV と同様に、他のコンポーネントをラップしたり、他のコンポーネント内にラップしたりできます。比較的自由に使用でき、固定された構造はありません。
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>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>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
ify-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>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>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>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>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>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>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>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>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 で使用
wxssに使用される柔軟なアイテムコンテンツの配置(justify-content) wxssに使用されるコンテナの内側軸上のアイテムの配置(align-items)。
以上がWeChat ミニ プログラム: ビュー (ビュー コンテナ) コンポーネントの解釈と分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。