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!
Wissen Sie, ob Sie die andere Person sofort kündigen, nachdem Sie ihr auf Douyin gefolgt sind?
cmccedu
So verwenden Sie Postmessage
So laden Sie eine FLV-Datei herunter
So verwenden Sie HTML für die Webnavigation
Verwendung von Elementen in Python
Verwendung der Memcpy-Funktion
Empfehlung für PHP-Programmiersoftware
