Comment définir la hauteur de l'élément sur la hauteur de la fenêtre dans Uniapp

Avec le développement de l'Internet mobile, les téléphones mobiles sont devenus un élément indispensable de la vie des gens et le développement des terminaux mobiles fait l'objet de plus en plus d'attention. En tant que cadre de développement multiplateforme, uniapp joue un rôle crucial dans le développement mobile. Dans uniapp, définir la hauteur de l'élément sur la hauteur de la fenêtre est une exigence courante. Cet article explique en détail comment y parvenir.

1. Paramétrage via le style CSS

Dans uniapp, nous pouvons définir la hauteur de l'élément via le style CSS. La méthode courante consiste à définir la hauteur de la fenêtre sur la hauteur de l'élément. Obtenez la hauteur de la fenêtre

Dans uniapp, nous pouvons utiliser la méthode uni.getSystemInfo() pour obtenir les informations système de l'appareil actuel, y compris la hauteur de la fenêtre. Par exemple :

const systemInfo = uni.getSystemInfoSync()
const windowHeight = systemInfo.windowHeight

2. Définissez la hauteur de l'élément

Après avoir obtenu la hauteur de la fenêtre, nous pouvons définir la hauteur de l'élément sur la hauteur de la fenêtre. Par exemple :

<view class="container" style="height: {{windowHeight}}px;"></view>

Parmi eux, conteneur est le nom de classe de l'élément, height dans l'attribut style est l'attribut height de l'élément et {{windowHeight}} est la variable de la hauteur de la fenêtre.

De cette façon, nous pouvons régler la hauteur de l'élément sur la hauteur de la fenêtre pour obtenir une adaptation de la page.

2. Configuration via la disposition flexible

En plus de la configuration via le style CSS, nous pouvons également utiliser la disposition flexible pour obtenir l'effet selon lequel la hauteur de l'élément est la hauteur de la fenêtre. Les étapes spécifiques sont les suivantes :

1. Définir la hauteur du conteneur principal

Dans la première étape, nous devons définir la hauteur du conteneur principal à 100vh, soit 100 % de la hauteur de la fenêtre. Par exemple :

<view class="container"></view>
<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

où l'attribut display est défini sur flex et l'attribut flex-direction est défini sur column, de sorte que les éléments du conteneur soient disposés dans la direction verticale.

2. Définissez l'attribut flex-grow de l'élément enfant

Dans la deuxième étape, nous devons définir l'attribut flex-grow de l'élément enfant afin qu'il puisse occuper la hauteur restante du conteneur. Par exemple :

<view class="container">
  <view class="content"></view>
</view>
<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
</style>

où content est le nom de classe de l'élément enfant et l'attribut flex-grow est 1, ce qui signifie que l'élément occupera toute la hauteur de l'espace disponible.

De cette façon, nous pouvons également obtenir l'effet que la hauteur de l'élément est la hauteur de la fenêtre.

3. Résumé

Cet article présente deux méthodes pour obtenir l'effet de la hauteur de l'élément dans uniapp étant la hauteur de la fenêtre, respectivement via le style CSS et la disposition flexible. Des opérations spécifiques doivent être ajustées en fonction de circonstances spécifiques. J'espère que cet article pourra être utile à tout le monde.

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!