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!
So stellen Sie den IE-Browser wieder her, um automatisch zu EDGE zu springen
Art der Verwendung in JavaScript
So öffnen Sie eine IMG-Datei
Lösung zur Verlangsamung der Zugriffsgeschwindigkeit bei der Anmietung eines US-Servers
AccessDenied-Fehlerlösung
Was bedeutet Marge in CSS?
Wie lautet das Passwort für den Mobilfunkdienst?
So eröffnen Sie ein digitales Währungskonto
