Ces dernières années, avec la popularité de l'Internet mobile, de plus en plus d'entreprises et de développeurs ont commencé à se concentrer sur le développement d'applications mobiles. Dans le développement multiplateforme, Uni-app a attiré beaucoup d'attention comme une excellente solution. Lors du développement réel, certains développeurs ont rencontré le problème de l'affichage plein écran de la vue Web dans Uni-app, ce qui a entraîné une interface inesthétique. Cet article explique comment utiliser WebView dans Uni-app pour empêcher l'application d'occuper tout l'écran.
1. Analyse du problème
Lors de l'utilisation de la vue Web pour l'imbrication de pages dans Uni-app, de nombreux développeurs pensent généralement à écrire directement la hauteur de la vue Web à 100 %. Cependant, cela conduira inévitablement à ce que la page occupe tout l’écran et manque de beauté. Afin de résoudre ce problème, nous pouvons imbriquer un conteneur dans la page et ajouter une vue Web dans le conteneur.
2. Implémentation du code
<view class="container"> <web-view :src="url"></web-view> </view>
En définissant le style du conteneur, la vue Web peut occuper la taille requise dans le conteneur.
.container { height : 600rpx; // 自定义高度 width : 100%; margin-top : 50rpx; }
Nous devons définir la hauteur de la vue Web à 100 %. À ce stade, la vue Web occupera tout l’espace du conteneur. Mais nous n'en avons pas besoin. Pour centrer la vue Web dans le conteneur, nous pouvons utiliser la disposition flexible et spécifier le centrage horizontal et vertical.
web-view { height: 100%; display: flex; justify-content: center; align-items: center; background-color: white; }
Grâce au code ci-dessus, nous pouvons utiliser la vue Web dans Uni-app pour obtenir l'effet de ne pas occuper le plein écran.
3. Notes
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!