CSS を使用して UniApp の背景画像を動的に変更する方法

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

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

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

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

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

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() + ')';
  }
}