Comment changer la taille de l'arrière-plan dans Uniapp

Ces dernières années, avec le développement de la technologie Internet mobile, la technologie de développement multiplateforme basée sur H5 et JavaScript est progressivement entrée dans la vision des gens. Parmi eux, uniapp est un framework de développement multiplateforme qui intègre le framework Vue et encapsule diverses API mobiles, ce qui peut aider les développeurs à créer rapidement des applications multiplateformes telles que des applications natives, des applets WeChat et H5. Au cours du processus de développement d'uniapp, vous rencontrerez parfois des situations dans lesquelles vous devrez modifier la taille de l'arrière-plan. Cet article présentera en détail comment modifier la taille de l'arrière-plan d'uniapp et les précautions à prendre.

1. Comment changer la taille de l'arrière-plan d'uniapp

1. Utilisez CSS pour contrôler la taille de l'image d'arrière-plan

Vous pouvez modifier la taille de l'arrière-plan en définissant la taille de l'image d'arrière-plan. Dans uniapp, nous pouvons utiliser l'attribut background-size du CSS pour définir la taille de l'image d'arrière-plan. La syntaxe est la suivante :

background-size: width height;

Parmi eux, width représente la largeur de l'image d'arrière-plan, height représente la hauteur de l'arrière-plan. image, et la valeur peut être des pixels (px), un pourcentage (%), vw et vh et d'autres unités. Il convient de noter que lorsque le rapport hauteur/largeur défini n'est pas cohérent avec le rapport hauteur/largeur d'origine de l'image, l'image peut être étirée ou compressée.

2. Utilisez JavaScript pour contrôler dynamiquement la taille de l'image d'arrière-plan

En plus d'utiliser CSS pour contrôler la taille de l'image d'arrière-plan, nous pouvons également utiliser JavaScript pour la contrôler dynamiquement. La méthode spécifique est la suivante :

(1) Définir un conteneur avec un style dans le fichier modèle et définir la taille, l'URL et d'autres attributs de l'image d'arrière-plan dans les données

<template>
  <div class="bg" :style="&#39;background-image: url(&#39; + imgUrl + &#39;); background-size: &#39; + bgSize + &#39;; height: 100vh&#39;">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: 'https://xxx.com/bg.jpg',
      bgSize: '100%',
      windowWidth: uni.getSystemInfoSync().windowWidth,
      windowHeight: uni.getSystemInfoSync().windowHeight
    }
  },
}
</script>

<style>
.bg {
  background-repeat: no-repeat;
  background-position: center;
}
</style>

(2) Calculer dynamiquement via JavaScript dans le fichier ; fonction de cycle de vie montée La largeur de l'image d'arrière-plan et attribuez le résultat du calcul à bgSize :

mounted () {
  let img = new Image()
  img.src = this.imgUrl
  let imgRatio = img.width / img.height
  let windowRatio = this.windowWidth / this.windowHeight
  if (imgRatio > windowRatio) { // 图片比窗口宽
    this.bgSize = 'auto 100%'
  } else { // 图片比窗口高
    this.bgSize = '100% auto'
  }
}

2. Notes

1. La taille de l'image d'arrière-plan doit être la même que celle du conteneur et conserver le rapport hauteur/largeur d'origine.

2. Lorsque vous utilisez CSS pour contrôler la taille de l'image d'arrière-plan, vous devez faire attention à la plage de valeurs de l'attribut background-size et empêcher l'image de s'étirer ou de se compresser.

3. Lorsque vous utilisez JavaScript pour contrôler dynamiquement la taille de l'image d'arrière-plan, vous devez obtenir la largeur et la hauteur de l'image dans la fonction de cycle de vie montée pour calculer la taille de l'image d'arrière-plan.

4. Les tailles d'écran et les résolutions des différents appareils doivent être prises en compte pour garantir que l'image d'arrière-plan s'adapte aux différentes tailles d'écran.

5. Lors de la définition de la taille de l'image d'arrière-plan, vous devez faire attention à ce que la hauteur du conteneur d'arrière-plan soit de 100vh pour éviter une hauteur insuffisante.

En bref, dans le développement uniapp, pour obtenir l'effet de modifier la taille de l'arrière-plan, vous devez maîtriser la syntaxe de base HTML, CSS et JavaScript, combinée aux caractéristiques du framework uniapp, et utiliser de manière flexible différentes méthodes pour y parvenir. J'espère que cet article vous aidera !

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!