uniapp utilise WebView sans occuper le plein écran

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

1. Ajouter un conteneur à la page

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

2. Définir le conteneur Style

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;
} 

3. Définir le style de la vue Web

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

1. Tant que le conteneur détermine la hauteur, la hauteur de la vue Web est de 100 %
2. Si vous souhaitez définir la hauteur de la largeur de la vue Web, vous pouvez uniquement utiliser la disposition flexible ou spécifier une largeur spécifique ;
3. Les pages dans la vue Web ne peuvent pas utiliser position:fixed ; 🎜# 4. Résumé#🎜🎜 #
Dans les applications mobiles, la vue Web est l'un des composants très importants. Comment empêcher la webview d’occuper le plein écran dans l’application ? Cet article présente une implémentation simple : contrôler la taille de la vue Web en définissant le style du conteneur. Je pense que les lecteurs peuvent réussir à obtenir cet effet dans leurs propres projets Uni-app grâce à l'introduction de cet article.

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!