Komponentenbeschreibung anzeigen:
Container anzeigen
ist dasselbe wie p im HTML-Code. Er kann andere Komponenten umschließen oder in andere Komponenten einschließen. Die Nutzung ist relativ kostenlos und hat keine feste Struktur.
Komponentenverwendung anzeigen:
Beispielprojekt-WXML-Code:
[XML] Einfache Textansicht Code kopieren
<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-Code für Beispielprojekt:
[CSS] Einfache Textansicht Code kopieren
.btnGroup{ display:flex; flex-direction:row; } .orange{ color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; } .blue{ color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; }
Darstellung des Ansichtsstils „flex-direction: row“:
WXML-Code lautet wie folgt
[XML] Einfache Textansicht Code kopieren
<view class="flex-wrp"> <view class="flex-item red" ></view> <view class="flex-item green" ></view> <view class="flex-item blue" ></view> </view>
Der WXSS-Code lautet wie folgt:
[CSS] Einfache Textansicht Code kopieren
.flex-wrp{ height: 100px; display:flex; background-color: #FFFFFF; } .flex-item{ width: 100px; height: 100px; } .red{ background: red; } .green{ background: green; } .blue{ background: blue; }
Rendering des Ansichtsstils Flex-Richtung: Spalte:
WXML-Code lautet wie folgt:
[XML] Einfache Textansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] Einfache Textansicht Code kopieren
.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; }
Rendering des Ansichtsstils justify-content: flex-start:
WXML-Code lautet wie folgt:
[XML] Einfacher Text Ansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] Einfache Textansicht Code kopieren
.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; }
Rendering des Ansichtsstils justify-content: flex-end:
WXML-Code lautet wie folgt:
[XML] Nur-Text-Ansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] Nur-Text-Ansicht Code kopieren
.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; }
Rendering des Ansichtsstils justify-content: center:
WXML-Code lautet wie folgt:
[XML] Nur-Text-Ansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] Einfache Textansicht Code kopieren
.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; }
Rendering des Ansichtsstils justify-content: space- zwischen:
Der WXML-Code lautet wie folgt:
[XML] Einfache Textansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] Reine Textansicht Code kopieren
.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; }
Rendering des Ansichtsstils justify-content: space-around:
Der WXML-Code lautet wie folgt:
[XML] Einfache Textansicht Code kopieren
<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>
Der WXSS-Code lautet wie folgt:
[CSS] 纯文本查看 复制代码
.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; }
视图样式align-items: flex-end的效果图:
WXML代码如下:
[XML] 纯文本查看 复制代码
<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代码如下:
[CSS] 纯文本查看 复制代码
.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; }
视图样式align-items: center的效果图:
WXML代码如下:
[XML] 纯文本查看 复制代码
<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代码如下:
[CSS] 纯文本查看 复制代码
.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; }
视图样式align-items: flex-start的效果图:
WXML代码如下:
[XML] 纯文本查看 复制代码
<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代码如下:
[CSS] 纯文本查看 复制代码
.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; }
主要属性:
排列方式(flex-direction),用于wxss
属性 |
描述 |
row |
横向排列 |
column |
纵向排列 |
弹性项目内容对齐(justify-content),用于wxss
属性 |
描述 |
flex-start |
弹性项目向行头紧挨着填充 |
flex-end |
弹性项目向行尾紧挨着填充 |
center |
弹性项目居中紧挨着填充 |
space-between |
弹性项目平均分布在该行上 |
space-around |
弹性项目平均分布在该行上,两边留有一半的间隔空间 |
Die Ausrichtung von Elementen auf der Innenachse des Containers (align-items), für wxss
Attribute
属性 |
描述 |
stretch |
默认值,弹性项目被拉伸以适应容器 |
center |
弹性项目位于容器的中心 |
flex-start |
弹性项目位于容器的开头 |
flex-end |
弹性项目位于容器的结尾 |
baseline |
弹性项目位于容器的基线上 |
Beschreibung
stretch
Standardwert, flexible Elemente werden gestreckt, um in den Container zu passen
Das Flex-Element befindet sich in der Mitte des Containers
flex-start
flex-start Am Anfang des Containers
flex-end
Flex-Elemente befinden sich am Ende des Containers
baseline
Flex-Elemente befinden sich auf der Basislinie des Containers td>
Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der offiziellen Komponenten des WeChat-Applets: 1. Ansicht (Container anzeigen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!