uniapp dynamically displays hidden background images

With the rapid development of mobile Internet and mobile applications, more and more developers and companies are beginning to adopt multi-platform development methods to reduce development costs and improve user experience. As a cross-platform development framework, UniApp provides a rich series of APIs that can quickly build a multi-platform application. In this article, we will introduce how to use UniApp to dynamically display and hide background images.

1. Prerequisites

Before using this article, you need to understand the basic use of UniApp and have already created a UniApp application.

2. Implementation steps

2.1 Introduce pictures

In the UniApp page, we can achieve dynamic display and hiding by introducing background pictures. First, we need to introduce image resources into the project. You can place the image in the project src directory, and then use Vue's image tag to introduce it in the page.

<template>
  <div>
    <img  class="bg-image lazy" src="/static/imghwm/default1.png" data-src="../../static/img/background.jpg" alt="uniapp dynamically displays hidden background images" >
    ...
  </div>
</template>

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

2.2 Switching display and hiding

In order to dynamically switch the display and hiding of images, we can use data binding in Vue to achieve this. Define a Boolean value isShowImg in the data object. When it is true, the background image is displayed, otherwise it is hidden.

<template>
  <div class="container">
    <img  class="bg-image lazy"  src="/static/imghwm/default1.png"  data-src="../../static/img/background.jpg"  v-show="isShowImg"/ alt="uniapp dynamically displays hidden background images" >
    ...
  </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>

Next, we can add a button to the page to switch the value of isShowImg.

<template>
  <div class="container">
    <img  class="bg-image lazy"  src="/static/imghwm/default1.png"  data-src="../../static/img/background.jpg"  v-show="isShowImg"/ alt="uniapp dynamically displays hidden background images" >
    <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>

So far, we have completed the function of dynamically displaying and hiding background images.

3. Summary

This article introduces how to use UniApp to dynamically display and hide background images. By introducing images and using Vue's data binding, it becomes very simple to switch between showing and hiding effects. In actual development, we can configure different background images as needed to better meet user needs.

The above is the detailed content of uniapp dynamically displays hidden background images. For more information, please follow other related articles on the PHP Chinese website!