Bagaimana untuk menukar saiz latar belakang dalam uniapp

Dalam beberapa tahun kebelakangan ini, dengan perkembangan teknologi Internet mudah alih, teknologi pembangunan merentas platform berdasarkan H5 dan JavaScript telah beransur-ansur masuk ke dalam wawasan orang ramai. Antaranya, uniapp ialah rangka kerja pembangunan merentas platform yang menyepadukan rangka kerja Vue dan merangkum pelbagai API mudah alih, yang boleh membantu pembangun dengan cepat membina aplikasi merentas platform seperti APP asli, applet WeChat dan H5. Semasa proses pembangunan uniapp, kadangkala anda menghadapi situasi di mana anda perlu menukar saiz latar belakang Artikel ini akan memperkenalkan secara terperinci cara menukar saiz latar belakang uniapp dan langkah berjaga-jaga.

1. Cara menukar saiz latar belakang uniapp

1 Gunakan CSS untuk mengawal saiz imej latar belakang

Anda boleh menukar saiz latar belakang dengan menetapkan saiz. daripada imej latar belakang. Dalam uniapp, kita boleh menggunakan atribut saiz latar belakang CSS untuk menetapkan saiz imej latar belakang Sintaks adalah seperti berikut:

background-size: width height;

di mana, lebar mewakili lebar imej latar belakang dan ketinggian. mewakili ketinggian imej latar belakang Anda boleh Nilai adalah dalam unit seperti piksel (px), peratusan (%), vw dan vh. Perlu diingat bahawa apabila nisbah aspek yang ditetapkan tidak konsisten dengan nisbah aspek asal gambar, ia boleh menyebabkan gambar menjadi renggang atau dimampatkan.

2. Gunakan JavaScript untuk mengawal saiz imej latar belakang secara dinamik

Selain menggunakan CSS untuk mengawal saiz imej latar belakang, kami juga boleh menggunakan JavaScript untuk mengawalnya secara dinamik. Kaedah khusus adalah seperti berikut:

(1) Tentukan bekas dengan gaya dalam fail templat, dan tentukan saiz, url dan atribut lain bagi imej latar belakang dalam data; > (2) Kira secara dinamik lebar imej latar belakang melalui JavaScript dalam fungsi kitaran hayat yang dipasang, dan tetapkan hasil pengiraan kepada bgSize:

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

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

Atas ialah kandungan terperinci Bagaimana untuk menukar saiz latar belakang dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!