How to use CSS to dynamically modify the background image in UniApp

UniApp is a cross-platform development framework that allows us to use HTML, CSS and JavaScript to build applications based on multiple platforms, such as WeChat mini-programs, Alipay mini-programs, etc. In this process, dynamically modifying the background image is a common requirement. This article will introduce how to use CSS to dynamically modify the background image in UniApp.

Use CSS to implement basic background image modification

The background-image property in CSS is used to set the background image of an element. We can use JavaScript to dynamically modify the CSS properties of elements to achieve the effect of dynamically modifying the background image. Let's demonstrate how to implement this function in UniApp.

1. Create an array containing the image URL

First, we need to create an array containing the image URL to store the background image we want to dynamically modify.

// 在 data 中定义 bgUrls 数组
data() {
  return {
    bgUrls: [
      'https://example.com/bg1.jpg',
      'https://example.com/bg2.jpg',
      'https://example.com/bg3.jpg'
    ],
    currentBgIndex: 0 // 记录当前背景图索引
  }
}

2. Add a container element to the template

Add a container element to the template as the element we need to dynamically modify the background image. Here we use the div element as the container.

<template>
  <div class="bg-container">
    <!-- 此处添加页面内容 -->
  </div>
</template>

3. Set the initial value of the background image in style

Set the initial value of the background image in style. Here we use the first URL in the array as the initial value. It is recommended to set a default background image to prevent the page from having no background image when the first URL fails to load.

<style>
  .bg-container {
    background-image: url('{{ bgUrls[currentBgIndex] }}');
  }
</style>

4. Modify the background image in the method

Finally, in the method that needs to modify the background image, we can dynamically modify the value of currentBgIndex, And use document.querySelector('.bg-container').style.backgroundImage to modify the background image. At the same time, in order to prevent the array from going out of bounds, we need to simulate currentBgIndex into a circular array, and set it to 0 when the array length is exceeded.

methods: {
  changeBg() {
    this.currentBgIndex = (this.currentBgIndex + 1) % this.bgUrls.length;
    document.querySelector('.bg-container').style.backgroundImage = 'url(' + this.bgUrls[this.currentBgIndex] + ')';
  }
}

Using the above steps, we can realize the basic background image modification function. However, this approach is not optimal in terms of performance. Every time you modify the background image, you need to reload the image resources, which puts a certain burden on the server. Therefore, we need to further optimize on this basis.

Use localStorage to implement background image caching

We can use localStorage to cache the loaded background image. Next time we need to load the same image, we can read it directly from the local cache to improve the loading speed. Reduce server load.

The following is the implementation method:

1. Load the background image in the created life cycle function

Add all backgrounds that need to be used All images are loaded when the component is created and stored in the local cache. Here we use window.localStorage to store the local cache, and the key can be named according to your own needs.

created() {
  this.bgUrls.forEach((url) => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      window.localStorage.setItem(url, img.src);
    };
  });
}

2. Encapsulate reading the local cache into a method

In the method, if there is an image corresponding to the URL in the local cache, the local image URL is used directly. Otherwise, load the image from the server and store it in the local cache before using the image URL. In this way, even if the page is refreshed, the loaded images still exist in the local cache and can be read directly from the local, thus reducing the number of server requests.

methods: {
  getBgUrl() {
    const url = this.bgUrls[this.currentBgIndex];
    const cachedUrl = window.localStorage.getItem(url);
    if (cachedUrl) {
      return cachedUrl;
    }
    const img = new Image();
    img.src = url;
    img.onload = () => {
      window.localStorage.setItem(url, this.img.src);
    };
    return url;
  },
  changeBg() {
    this.currentBgIndex = (this.currentBgIndex + 1) % this.bgUrls.length;
    document.querySelector('.bg-container').style.backgroundImage = 'url(' + this.getBgUrl() + ')';
  }
}

Using the above steps, we can dynamically modify the background image, and at the same time reduce the number of server requests and improve page performance by caching the loaded image.

To sum up, this article introduces how to use CSS to dynamically modify the background image in UniApp, and use localStorage to implement background image caching, which improves page performance, reduces server requests, and provides a development practice An implementation worth reference.

The above is the detailed content of How to use CSS to dynamically modify the background image in UniApp. For more information, please follow other related articles on the PHP Chinese website!