uniapp memaparkan imej latar belakang tersembunyi secara dinamik

Dengan perkembangan pesat Internet mudah alih dan aplikasi mudah alih, semakin ramai pembangun dan syarikat mula menggunakan kaedah pembangunan berbilang platform untuk mengurangkan kos pembangunan dan meningkatkan pengalaman pengguna. Sebagai rangka kerja pembangunan merentas platform, UniApp menyediakan siri API yang kaya yang boleh membina aplikasi berbilang platform dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan UniApp untuk memaparkan dan menyembunyikan imej latar belakang secara dinamik.

1. Prasyarat

Untuk menggunakan artikel ini, anda perlu memahami penggunaan asas UniApp dan telah pun mencipta aplikasi UniApp.

2. Langkah-langkah pelaksanaan

2.1 Memperkenalkan imej

Dalam halaman UniApp, kita boleh mencapai paparan dinamik dan bersembunyi dengan memperkenalkan imej latar belakang. Pertama, kita perlu memperkenalkan sumber imej ke dalam projek. Anda boleh meletakkan imej dalam direktori src projek, dan kemudian gunakan teg imej Vue

<template>
  <div class="container">
    <img class="bg-image" src="../../static/img/background.jpg"/>
    ...
  </div>
</template>

<style>
  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
</style>

2.2 Menukar paparan dan menyembunyikan

Untuk menukar paparan dan menyembunyikan imej secara dinamik, kami boleh menggunakan pengikatan data dalam Vue untuk mencapai matlamat ini. Tentukan nilai Boolean isShowImg dalam objek data Apabila ia benar, imej latar belakang dipaparkan, jika tidak ia tersembunyi.

<template>
  <div class="container">
    <img class="bg-image" v-show="isShowImg" src="../../static/img/background.jpg"/>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowImg: true,
    }
  }
}
</script>

<style>
  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
</style>

Seterusnya, kita boleh menambah butang pada halaman untuk menukar nilai isShowImg.

<template>
  <div class="container">
    <img class="bg-image" v-show="isShowImg" src="../../static/img/background.jpg"/>
    <button @click="toggleImage">Toggle Image</button>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowImg: true,
    }
  },
  methods: {
    toggleImage() {
      this.isShowImg = !this.isShowImg;
    }
  }
}
</script>

<style>
  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
</style>

Pada ketika ini, kami telah menyelesaikan fungsi memaparkan dan menyembunyikan imej latar belakang secara dinamik.

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan UniApp untuk memaparkan dan menyembunyikan imej latar belakang secara dinamik. Dengan memperkenalkan imej dan menggunakan pengikatan data Vue, menjadi sangat mudah untuk bertukar antara menunjukkan dan menyembunyikan kesan. Dalam pembangunan sebenar, kami boleh mengkonfigurasi imej latar belakang yang berbeza mengikut keperluan untuk memenuhi keperluan pengguna dengan lebih baik.

Atas ialah kandungan terperinci uniapp memaparkan imej latar belakang tersembunyi secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!