Uniapp verwendet Webview, ohne den Vollbildmodus zu belegen

Mit der Popularität des mobilen Internets haben in den letzten Jahren immer mehr Unternehmen und Entwickler begonnen, sich auf die Entwicklung mobiler Anwendungen zu konzentrieren. In der plattformübergreifenden Entwicklung hat Uni-app als hervorragende Lösung große Aufmerksamkeit erregt. Bei der tatsächlichen Entwicklung stießen einige Entwickler auf das Problem der Vollbildanzeige der Webansicht in der Uni-App, was zu einer unansehnlichen Benutzeroberfläche führte. In diesem Artikel erfahren Sie, wie Sie Webview in Uni-App verwenden, um zu verhindern, dass die Anwendung den gesamten Bildschirm einnimmt.

1. Problemanalyse

Bei der Verwendung der Webansicht für die Seitenverschachtelung in der Uni-App gehen viele Entwickler normalerweise davon aus, dass die Höhe der Webansicht direkt als 100 % angegeben wird. Dies führt jedoch unweigerlich dazu, dass die Seite den gesamten Bildschirm einnimmt und es ihr an Schönheit mangelt. Um dieses Problem zu lösen, können wir einen Container in der Seite verschachteln und eine Webansicht im Container hinzufügen. 2. Code-Implementierung

<view class="container">
  <web-view :src="url"></web-view>
</view>

Definieren Sie den Stil der Webansicht

1. Wir müssen die Höhe der Webansicht auf 100 % einstellen. Zu diesem Zeitpunkt nimmt die Webansicht den gesamten Raum des Containers ein. Aber das brauchen wir nicht. Um die Webansicht im Container zu zentrieren, können wir das Flex-Layout verwenden und sowohl die horizontale als auch die vertikale Zentrierung festlegen.

.container {
  height : 600rpx;  // 自定义高度
  width : 100%;
  margin-top : 50rpx;
} 

Mit dem obigen Code können wir Webview in der Uni-App verwenden, um den Effekt zu erzielen, dass nicht der gesamte Bildschirm belegt wird.
2. 3. Hinweise

Solange der Container die Höhe bestimmt, beträgt die Höhe der Webansicht 100 %.

3. Wenn Sie die Breite der Webansicht festlegen möchten, können Sie nur das Flex-Layout verwenden oder eine bestimmte Breite angeben ;

Die Seite in der Webansicht kann nicht verwendet werden Position: fest

4. Zusammenfassung

In mobilen Anwendungen ist die Webansicht eine der sehr wichtigen Komponenten. Wie kann verhindert werden, dass die Webansicht in der Anwendung den Vollbildmodus einnimmt? In diesem Artikel wird eine einfache Implementierung vorgestellt: Steuern der Größe der Webansicht durch Festlegen des Containerstils. Ich glaube, dass Leser diesen Effekt durch die Einführung dieses Artikels erfolgreich in ihren eigenen Uni-App-Projekten erzielen können.

Das obige ist der detaillierte Inhalt vonUniapp verwendet Webview, ohne den Vollbildmodus zu belegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!