Einführung in die Methode, mit der Elemente in der WeChat-Entwicklung den gesamten Bildschirm einnehmen

In diesem Artikel werden hauptsächlich die relevanten Informationen dazu vorgestellt, wie man dafür sorgt, dass die Elemente die gesamte Bildschirmhöhe im WeChat-Applet einnehmen. Freunde in Not können sich auf

Damit die Elemente die gesamte Bildschirmhöhe einnehmen, beziehen Implementierungsmethode für die Bildschirmhöhe des WeChat-Applets

In Projekten wird häufig ein Containerelement verwendet, um die Höhe und Breite des Bildschirms auszufüllen, und dann werden andere Elemente in diesem Containerelement platziert.

Die Breite ist einfach Breite:100 %

Aber was ist mit der Höhe? Was wir wissen, ist Höhe :100% muss verwendet werden, wenn die Höhe des übergeordneten Elements angegeben wird.

Mein bisheriger Ansatz bestand darin, js zu verwenden, um die Höhe des Bildschirms zu ermitteln und sie dann der Höhe zuzuweisen

Die Bildschirmhöhe auf der Webseite beträgt :window.innerHeight ;

Im WeChat-Applet müssen Sie wx.getSystemInfointerface aufrufen und dann den Wert über setData

Aber offensichtlich ist es durch js definitiv nicht so effizient wie CSS, das Stile direkt angibt.

Also verwenden wir eine andere Methode:

Set body,html{height:100%} in der Webseite;

Set body und html Set auf 100 %, damit wir height:100 % in ihren untergeordneten Elementen verwenden können, damit unsere Containerelemente die volle Höhe des Bildschirms einnehmen.

Aber im WeChat-Applet gibt es kein

Dom-Objekt, aber wenn wir uns das Debugging-Tool ansehen, können wir den Dom-Baum sehen (ich nicht). wissen, wie man es nennt) , nennen wir es so), der Stammknoten ist page, also versuchen wir es mit page{height:100%}

Tatsächlich ist es machbar. Die Höhe füllt das gesamte Applet-Fenster aus.

So kann ich gerne weiter an meinem kleinen Programm schreiben.

[Verwandte Empfehlungen]

1.

Quellcode der WeChat-Plattform herunterladen

2 >

Das obige ist der detaillierte Inhalt vonEinführung in die Methode, mit der Elemente in der WeChat-Entwicklung den gesamten Bildschirm einnehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!