So ändern Sie die Hintergrundgröße in Uniapp

Mit der Entwicklung der mobilen Internettechnologie ist in den letzten Jahren eine plattformübergreifende Entwicklungstechnologie auf Basis von H5 und JavaScript allmählich in die Vision der Menschen gerückt. Unter diesen ist uniapp ein plattformübergreifendes Entwicklungsframework, das das Vue-Framework integriert und verschiedene mobile APIs kapselt, was Entwicklern dabei helfen kann, schnell plattformübergreifende Anwendungen wie native APPs, WeChat-Applets und H5 zu erstellen. Während des Entwicklungsprozesses von Uniapp kommt es manchmal vor, dass Sie die Hintergrundgröße ändern müssen. In diesem Artikel erfahren Sie ausführlich, wie Sie die Hintergrundgröße von Uniapp ändern und welche Vorsichtsmaßnahmen Sie ergreifen müssen.

1. So ändern Sie die Hintergrundgröße von uniapp

1. Verwenden Sie CSS, um die Größe des Hintergrundbilds zu steuern. Sie können den Effekt der Änderung der Hintergrundgröße erzielen, indem Sie die Größe des Hintergrundbilds festlegen. In uniapp können wir das Attribut „background-size“ von CSS verwenden, um die Größe des Hintergrundbilds festzulegen. Die Syntax lautet wie folgt:

background-size: width height;

Dabei repräsentiert die Breite die Breite des Hintergrundbilds und die Höhe die Höhe des Hintergrunds Bild, und der Wert kann Pixel (px), Prozentsatz (%), vw und vh und andere Einheiten sein. Es ist zu beachten, dass das Bild gestreckt oder gestaucht werden kann, wenn das eingestellte Seitenverhältnis nicht mit dem ursprünglichen Seitenverhältnis des Bildes übereinstimmt.

2. Verwenden Sie JavaScript, um die Größe des Hintergrundbilds dynamisch zu steuern.

Zusätzlich zur Verwendung von CSS zur Steuerung der Größe des Hintergrundbilds können wir auch JavaScript verwenden, um es dynamisch zu steuern. Die spezifische Methode ist wie folgt:

(1) Definieren Sie einen Container mit Stil in der Vorlagendatei und definieren Sie die Größe, URL und andere Attribute des Hintergrundbilds in den Daten.

<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) Berechnen Sie dynamisch über JavaScript in der montierte Lebenszyklusfunktion Die Breite des Hintergrundbilds und weisen Sie das Berechnungsergebnis bgSize zu:

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. Hinweise

1 Die Größe des Hintergrundbilds sollte mit der des Containers übereinstimmen und das ursprüngliche Seitenverhältnis beibehalten.

2. Wenn Sie CSS verwenden, um die Größe des Hintergrundbilds zu steuern, müssen Sie auf den Wertebereich des Attributs „Hintergrundgröße“ achten und verhindern, dass das Bild gestreckt oder gestaucht wird.

3. Wenn Sie JavaScript verwenden, um die Größe des Hintergrundbilds dynamisch zu steuern, müssen Sie die Breite und Höhe des Bilds in der montierten Lebenszyklusfunktion ermitteln, um die Größe des Hintergrundbilds zu berechnen.

4. Die Bildschirmgrößen und Auflösungen verschiedener Geräte müssen berücksichtigt werden, um sicherzustellen, dass sich das Hintergrundbild an unterschiedliche Bildschirmgrößen anpasst.

5. Beim Festlegen der Größe des Hintergrundbilds müssen Sie darauf achten, ob die Höhe des Hintergrundcontainers 100 VH beträgt, um eine unzureichende Containerhöhe zu vermeiden.

Kurz gesagt, um in der Uniapp-Entwicklung den Effekt der Änderung der Hintergrundgröße zu erzielen, müssen Sie die grundlegende HTML-, CSS- und JavaScript-Syntax in Kombination mit den Eigenschaften des Uniapp-Frameworks beherrschen und flexibel verschiedene Methoden verwenden, um dies zu erreichen. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundgröße in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!