CSS-Pseudoklasse: empty makes me shine (Beispielcode)

Jeder, der meine Artikel in letzter Zeit gelesen hat, weiß, dass ich derzeit für ein WeChat-Miniprogrammprojekt verantwortlich bin, bei dem ich auf viele interessante Dinge und einige „seltsame Ideen“ gestoßen bin. Der Hintergrund dieses Artikels ist, dass ich mir eines Morgens eine Menge wx:if/else ansah, die in der wxml-Datei hidden , und mich plötzlich ärgerte. Ganz zu schweigen von den Leistungsproblemen, die durch wx:if verursacht wurden, waren die Tags auch redundant.

Im Anschluss an den vorherigen Artikel [Analyse von yPicker-Komponenten in der benutzerdefinierten Komponentenbibliothek des WeChat-Applets und Implementierung einer dreistufigen Verknüpfung zwischen Provinzen, Städten und Bezirken] habe ich ein solches Beispiel analysiert – die benutzerdefinierte Implementierung einer dreistufigen Verknüpfung zwischen Provinzen, Städten und Bezirken. Es enthält detaillierte Codes, daher werde ich hier nicht mehr dazu sagen. Lassen Sie uns darüber sprechen, wie man es aufruft:

Das ist mein damaliger Gedanke: Einerseits lag es daran, dass ich „nicht zu viel in JavaScript schreiben“ wollte, und andererseits achtete JavaScript nur auf diese drei Variablen, weil ich jeweils die Provinz, die Stadt und den Bezirk implementierte. Leerzeichen und andere Dinge zwischen ihnen wurden alle in die wxml-Datei übernommen. So was:

<view class="Abteilungen Standort" bindtap="fixedshow">
  <view class="depart_title">Standort</view>
  <view wx:if="{{provinzen&&städte&&gebiete}}" class="placeholder depart_content">{{provinzen}} {{städte}} {{gebiete}}</view>
  <view class="placeholder depart_content befselect" wx:else>Bitte wählen Sie Ihren aktuellen Standort aus</view>
  <view class="desc">Falls Änderungen vorgenommen werden, bitte ändern und erneut übermitteln</view>
</Ansicht>

(Da der Aufruf nachträgliche Änderungen nach sich zieht, klicken Sie im Popup-Fenster nur dann auf die Schaltfläche „Bestätigen“, wenn Sie die drei Variablen, die in diesem Code im Ereignis vorkommen, den drei Variablen zuweisen. Andernfalls ist die Änderung, sofern sie vorgenommen wird, unabhängig davon, ob Sie auf „Abbrechen“ oder „Bestätigen“ klicken, bereits erfolgt, was nicht sinnvoll ist!)

Der Aufbau ist wie folgt:

.Abteilungen{
  Breite: 100 %;
  Höhe: 96rpx;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Schriftgröße: 36rpx;
  Schriftstärke: 347;
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
}
.Standort{
  Position: relativ;
  Rahmen unten: 1rpx durchgezogen rgba(0,0,0,.009);
  Anzeige: Flex;
  Elemente ausrichten: Flex-Start;
  Polsterung oben: 20rpx;
}

.desc{
  Position: absolut;
  rechts: 19rpx;
  unten: 4rpx;
  Farbe: RGB (63,142,255);
  Schriftgröße: 23rpx;
}
.Abteilungen .depart_title{
  Breite: 20 %;
}
.Abteilungen .depart_content{
  Rand links: 10 %;
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
}
.Abteilungen .Platzhalter{
  Breite: 69 %;
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
} 

Nachdem Sie sich entschieden haben, wx:if hier zu ersetzen, sollten Sie zunächst überlegen: Wodurch soll es ersetzt werden?
Die Funktion von wx:if besteht darin, festzustellen, ob es existiert. Wenn es nicht existiert (die Bedingung ist nicht erfüllt), wird zur Logik von wx:else oder wx:elif gewechselt!

OK, wenn Sie darüber nachdenken, sollte Ihnen eine CSS-Pseudoklasse einfallen: :empty ! Es macht, was wir wollen: wenn das Element (Inhalt) leer ist...
Ich habe schnell diese Änderung am Code vorgenommen:

<view class="Abteilungen Standort" bindtap="fixedshow">
  <view class="depart_title">Standort</view>
  <view class="placeholder depart_content">{{Provinzen}} {{Städte}} {{Gebiete}}</view>
  <view class="desc">Falls Änderungen vorgenommen werden, bitte ändern und erneut übermitteln</view>
</Ansicht>

Fügen Sie dann diese Pseudoklasse zur Klasse „depart_content“ hinzu:

.placeholder:empty::vor{
  Inhalt: „Bitte wählen Sie Ihren aktuellen Standort aus“;
  Farbe: rgba(0,0,0,.6);
} 

Eine Niete!

Nach Rücksprache mit den Informationen: Die Pseudoklasse :empty bedeutet, dass, wenn der Tag-Inhalt leer ist, keine Übereinstimmung erzielt wird, wenn sich im Inhaltsbereich ein Leerzeichen befindet!

Achten Sie beim Schreiben von Tags unbedingt darauf, ob innerhalb der Tags Leerzeichen oder Zeilenumbrüche vorhanden sind! (Neue Zeilen werden oft als Leerzeichen interpretiert.)
Achten Sie bei nicht-single-Tags unbedingt auf das schließende Tag!

Die endgültige Lösung lautet: Verbinde die drei Variablen mit Leerzeichen in js und rendere sie dann auf der Seite!

(Tatsächlich handelt es sich hierbei um einen benutzerdefinierten Selektor. Bei der automatischen Positionierung wird lediglich eine Anforderung an Amap gesendet, um die Felder für Provinz, Stadt und Bezirk abzurufen. Ich werde den Code nicht schreiben …)

An dieser Stelle stellen wir eines fest: Wir haben oben nicht nur die leere Pseudoklasse verwendet, sondern auch das Pseudoelement davor!

Tatsächlich kommt dies sehr häufig vor. Schließlich kann nur mit leeren Elementen kein Inhalt hinzugefügt werden (es scheint, dass im gesamten CSS nur Pseudoelemente wie „vorher“ und „nachher“ der Seite Inhalt hinzufügen können, egal ob es sich um Text oder Bilder handelt).

Meiner Meinung nach gibt es zwei Bereiche, denen mehr Aufmerksamkeit geschenkt werden sollte:

• In Pseudoelementen wird keine Position verwendet! Im Allgemeinen ist für die Festlegung des „Vorher“-/„Nachher“-Stils eines Elements (mit Inhalt) eine Positionierung erforderlich: die Angabe, wo es angezeigt wird. Andernfalls wird der Text im Pseudoelement höchstwahrscheinlich nicht angezeigt. Aus dem Leerzeichen in diesem Artikel können wir schließen, dass es vom ursprünglichen Inhalt verdeckt wird.
• Aus dem ersten Punkt können wir schließen, dass das Einfügen von Inhalten und Grafiken in das Tag mit den Pseudoelementen :before und :after keinen Einfluss auf die Übereinstimmung der leeren Pseudoklasse hat!

Diese Funktion ist sehr nützlich.

Aus dem Obigen können wir ersehen, dass der größte Nutzen dieser Pseudoklasse die „Eingabeaufforderung für fehlende Felder“ ist! Das ist sehr praktisch. Darüber hinaus kann das Überlassen dieser Aufgabe an CSS auch eine Menge „(Layout-)Belastung“ reduzieren, ein besseres Erlebnis bieten und die Wartung vereinfachen!

Als ich das Projekt beispielsweise optimierte, fügte ich allen angeforderten Feldern einen einheitlichen Klassennamen hinzu:

.ym-empty:empty::vorher{
	Inhalt: „Keine Daten, bitte versuchen Sie es erneut“,
	Anzeige: Block;
	Textausrichtung: zentriert;
	Farbe: rgba(0,0,0,.6);
	/** Andere Positionierungs- und Schriftartänderungsvorgänge*/
}

Damit schließe ich meinen Artikel über die CSS-Pseudoklasse „leer“ ab, der mir aufgefallen ist. Weitere Informationen zur CSS-Pseudoklasse „leer“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!