WeChat-Applet-Ansicht: Beispiel für ein flexibles Layout

WeChat Mini Program View unterstützt zwei Layoutmethoden: Block und Flex

Alle Ansichten sind standardmäßig blockiert

Wenn Sie das Flex-Layout verwenden möchten, Sie müssen die Style-Anweisung anzeigen:

display:flex;

Das Folgende ist eine Einführung in das Flex-Layout des WeChat-Applets

Erstellen Sie zunächst eine einfache Demo

  <view class="main">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
  </view>

Hinzufügen die Hintergrundfarbe, um es klarer zu sehen

.main {
  width: 100%;
  background-color: antiquewhite;
}

.item {
  height: 100rpx;
  width: 100rpx;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: dodgerblue;
}

.item3 {
  background-color: greenyellow;
}

Dann sieht es so aus:

Dann fügen wir zuerst display: flex

Es ist besser, das Flex-Layout zu verwenden. Idee, es scheint, dass die Ansicht nicht automatisch

erbt, Sie müssen es in jeder Ansicht hinzufügen, die Sie verwenden möchten.

Das erste ist das horizontale Layout und das vertikale Layout. Um das Attribut Flex-Richtung festzulegen, gibt es 4 optionale Werte:

• Reihe: horizontal von links nach rechts Die Richtung ist die Hauptachse

• Zeilenumkehr: die horizontale Richtung von rechts nach links ist die Hauptachse

• Spalte: die vertikale Richtung von oben nach unten ist die Hauptachse

• Spaltenumkehr: Die vertikale Richtung von unten nach oben ist die Hauptachse

Werfen wir einen Blick auf den Unterschied zwischen den Einstellungen Reihe und Reihenumkehr:
Reihe:



Reihenumkehr:



Dann müssen wir festlegen. Für die Layoutrichtung der Elemente in horizontaler Richtung müssen Sie das Attribut just

ify-content festlegen, das 5 optionale Werte hat:

• Flex-Start: Richten Sie den Startpunkt der Hauptachse aus (Standardwert)



• Flex-

  Ende: Spindelendpunktausrichtung



• Mitte: In der Mitte der Hauptachse ausrichten



• Abstand zwischen: Beide Enden ausrichten, mit Ausnahme der untergeordneten Elemente an beiden Enden. Außerhalb des Containers an beiden Enden ist der Abstand zwischen anderen untergeordneten Elementen gleich



• space-around: Der Abstand zwischen den einzelnen untergeordneten Elementen ist gleich. Der Abstand zwischen den untergeordneten Elementen an beiden Enden des Containers ist auch derselbe wie der Abstand zwischen

  anderen untergeordneten Elementen Elemente



Dann müssen wir das Element vertikal festlegen. Für die Layoutrichtung müssen Sie das Attribut align-items festlegen, das 5 optionale Werte hat:
• Stretch füllt den gesamten Container (Standardwert)



• Flex-Start richtet den Startpunkt der Seitenachse aus (hier Wir stellen die Höhe der Unteransicht manuell ein, um sie klarer zu sehen)



• flex-end richtet den Endpunkt der Querachse aus



• Mitte richtet die Mitte in der Querachse aus



• Grundlinie richtet sich an der aus erste Textzeile des untergeordneten Elements



Die untergeordnete Ansicht verfügt außerdem über ein Attribut „align-self“, das das übergeordnete Attribut „align-items“ des Elements überschreiben kann , das 6 optionale Werte hat: auto |. flex-end |. (auto erbt das align-items-Attribut des übergeordneten Elements und die anderen sind konsistent mit align-items)
Zum Beispiel haben wir im letzten Basisbeispiel oben Punkt3 auf align-self:flex-end;
gesetzt und es sieht so aus:



Darüber hinaus gibt es das Flex-Wrap-Attribut, mit dem gesteuert wird, ob die Unteransicht umbrochen wird. Es stehen drei Werte zur Verfügung:
• nowrap: kein Zeilenumbruch (Standard)

• wrap: Zeilenumbruch

• wrap-reverse: Zeilenumbruch, die erste Zeile ist unten

Da ist auch eine Unteransicht mit

order-Attribut kann die Reihenfolge von Unterelementen steuern, und der Standardwert ist 0. Wenn wir im obigen Beispiel beispielsweise item3 auf order:-1 setzen, können wir item3 voranstellen



Dies sind die gängigen Flex-Layouts

Wer WeChat-Miniprogramme schreibt, kann es versuchen

Abschließend, wenn Sie möchten um jederzeit Miniprogramme zu erstellen Es wäre besser, Bootstrap

[Verwandte Empfehlungen]

1 direkt zu unterstützen Einführung in die Rolle des Ansichtsfensters (Bildtext)

2. Eine kurze Diskussion des responsiven HTML5-Layouts

3

4. Ein Beispiel-Tutorial zur Miniprogrammentwicklung mit Co zur Handhabung asynchroner Prozesse

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Ansicht: Beispiel für ein flexibles Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!